/* ═══════════════════════════════════════════════════════════════════
   FlowEnForm Design System — Tokens  v1.0a
   ─────────────────────────────────────────────────────────────────
   Single source of truth for all design decisions.
   Import this file first; all other stylesheets depend on these vars.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {

  /* ── Raw Palette ──────────────────────────────────────────────── */

  /* Taupe — primary brand, earthy warmth */
  --clr-taupe-900:   #3A2F24;
  --clr-taupe-700:   #6B5B49;
  --clr-taupe-500:   #8C7861;   /* PRIMARY */
  --clr-taupe-300:   #B5A08D;
  --clr-taupe-100:   #F2EDE7;
  --clr-taupe-50:    #FAF7F4;

  /* Sage — secondary, nature, calm */
  --clr-sage-700:    #4F7B6C;
  --clr-sage-500:    #7A9B8E;   /* SECONDARY */
  --clr-sage-300:    #A5C2B8;
  --clr-sage-100:    #EEF4F1;

  /* Terracotta — accent, warmth, energy */
  --clr-terra-700:   #96583E;
  --clr-terra-500:   #C07A60;   /* ACCENT */
  --clr-terra-300:   #DBA896;
  --clr-terra-100:   #F7EDE8;

  /* Sand — neutral warm tones */
  --clr-sand-400:    #D4BFA6;
  --clr-sand-200:    #EAD9C6;
  --clr-sand-100:    #F5EFE8;

  /* Dark / Light Neutrals */
  --clr-dark-900:    #1A1816;
  --clr-dark-700:    #2C2927;
  --clr-dark-500:    #3D3935;
  --clr-dark-300:    #5C5652;
  --clr-dark-100:    #9C9791;
  --clr-light-300:   #D3D0CB;
  --clr-light-200:   #ECEAE7;
  --clr-light-100:   #F9F7F4;
  --clr-white:       #FFFFFF;

  /* ── Semantic Color Mappings ──────────────────────────────────── */

  /* Primary */
  --color-primary:          var(--clr-taupe-500);
  --color-primary-dark:     var(--clr-taupe-700);
  --color-primary-light:    var(--clr-taupe-300);
  --color-primary-mist:     var(--clr-taupe-100);

  /* Secondary */
  --color-secondary:        var(--clr-sage-500);
  --color-secondary-dark:   var(--clr-sage-700);
  --color-secondary-light:  var(--clr-sage-300);
  --color-secondary-mist:   var(--clr-sage-100);

  /* Accent */
  --color-accent:           var(--clr-terra-500);
  --color-accent-dark:      var(--clr-terra-700);
  --color-accent-light:     var(--clr-terra-300);
  --color-accent-mist:      var(--clr-terra-100);

  /* Surfaces & Background */
  --color-bg:               var(--clr-light-100);
  --color-bg-warm:          var(--clr-sand-100);
  --color-surface:          var(--clr-white);
  --color-surface-raised:   #FDFCFB;
  --color-surface-dark:     var(--clr-dark-700);
  --color-surface-darker:   var(--clr-dark-900);

  /* Borders */
  --color-border:           rgba(44, 41, 39, 0.08);
  --color-border-md:        rgba(44, 41, 39, 0.13);
  --color-border-strong:    rgba(44, 41, 39, 0.22);

  /* Text */
  --color-text:             var(--clr-dark-700);
  --color-text-sub:         var(--clr-dark-300);
  --color-text-muted:       var(--clr-dark-100);
  --color-text-inverse:     var(--clr-white);

  /* Feedback */
  --color-success:          #3B7D6B;
  --color-success-mist:     #E8F3F0;
  --color-warning:          #B38A35;
  --color-warning-mist:     #FAF3E5;
  --color-danger:           #B54040;
  --color-danger-mist:      #FBEBEB;
  --color-info:             #3D6BA3;
  --color-info-mist:        #EAF0F9;

  /* ── Typography ───────────────────────────────────────────────── */

  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale  — 1.25 modular ratio */
  --text-2xs:  0.6875rem;    /*  11px */
  --text-xs:   0.8125rem;    /*  13px */
  --text-sm:   0.9375rem;    /*  15px */
  --text-md:   1.0625rem;    /*  17px */
  --text-lg:   1.25rem;      /*  20px */
  --text-xl:   1.5rem;       /*  24px */
  --text-2xl:  1.875rem;     /*  30px */
  --text-3xl:  2.375rem;     /*  38px */
  --text-4xl:  3rem;         /*  48px */
  --text-5xl:  3.75rem;      /*  60px */
  --text-6xl:  4.75rem;      /*  76px */

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Line heights */
  --lh-tight:    1.15;
  --lh-snug:     1.30;
  --lh-normal:   1.55;
  --lh-relaxed:  1.75;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.03em;
  --ls-wider:    0.06em;
  --ls-widest:   0.10em;

  /* ── Spacing (4 px base) ──────────────────────────────────────── */
  --sp-px:  1px;
  --sp-0:   0;
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-32:  8rem;      /* 128px */

  /* ── Border Radius ────────────────────────────────────────────── */
  --r-xs:    4px;
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-2xl:   32px;
  --r-pill:  9999px;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --sh-xs:    0 1px 2px rgba(44, 41, 39, 0.05);
  --sh-sm:    0 1px 4px rgba(44, 41, 39, 0.06),  0 1px 2px rgba(44, 41, 39, 0.04);
  --sh-md:    0 4px 12px rgba(44, 41, 39, 0.07), 0 1px 3px rgba(44, 41, 39, 0.04);
  --sh-lg:    0 8px 24px rgba(44, 41, 39, 0.08), 0 2px 6px rgba(44, 41, 39, 0.04);
  --sh-xl:    0 16px 48px rgba(44, 41, 39, 0.10), 0 4px 12px rgba(44, 41, 39, 0.05);
  --sh-inner: inset 0 1px 3px rgba(44, 41, 39, 0.07);

  /* ── Motion ───────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.00, 0.00, 0.20, 1.00);
  --ease-in:    cubic-bezier(0.40, 0.00, 1.00, 1.00);
  --ease-inout: cubic-bezier(0.40, 0.00, 0.20, 1.00);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1.00);

  --t-instant: 60ms  var(--ease-out);
  --t-fast:    120ms var(--ease-out);
  --t-normal:  200ms var(--ease-out);
  --t-slow:    320ms var(--ease-out);

  /* ── Layout ───────────────────────────────────────────────────── */
  --sidebar-w:      272px;
  --topbar-h:       68px;
  --max-w:         1280px;
  --max-w-narrow:   780px;
  --max-w-prose:    660px;

  /* ── Z-index ──────────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  1;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* ── Bootstrap Variable Overrides ─────────────────────────────── */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 140, 120, 97; /* taupe-500 */
  --bs-primary-text-emphasis: var(--color-primary-dark);
  --bs-primary-bg-subtle: var(--color-primary-mist);
  --bs-primary-border-subtle: var(--color-primary-light);
  --bs-secondary: var(--color-secondary);
  --bs-secondary-rgb: 122, 155, 142; /* sage-500 */
  --bs-secondary-text-emphasis: var(--color-secondary-dark);
  --bs-secondary-bg-subtle: var(--color-secondary-mist);
  --bs-secondary-border-subtle: var(--color-secondary-light);
  --bs-success: var(--color-success);
  --bs-success-rgb: 59, 125, 107;
  --bs-success-bg-subtle: var(--color-success-mist);
  --bs-success-border-subtle: rgba(59, 125, 107, 0.25);
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 179, 138, 53;
  --bs-warning-bg-subtle: var(--color-warning-mist);
  --bs-warning-border-subtle: rgba(179, 138, 53, 0.25);
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 181, 64, 64;
  --bs-danger-bg-subtle: var(--color-danger-mist);
  --bs-danger-border-subtle: rgba(181, 64, 64, 0.25);
  --bs-info: var(--color-info);
  --bs-info-rgb: 61, 107, 163;
  --bs-info-bg-subtle: var(--color-info-mist);
  --bs-info-border-subtle: rgba(61, 107, 163, 0.25);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-dark);
  --bs-table-bg: transparent;
}