/* ============================================================
   SoftOrder — Colors & Type
   The full design token sheet. Import this in any artifact.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Palette (the six, named in French) ---------- */
  --parchemin: #FAF6EE;   /* the page itself, the calm */
  --safran:    #C08A3A;   /* signature; primary actions, brand voice */
  --olive:     #7C9450;   /* what is good — served, free, complete */
  --terre:     #C26A4E;   /* what is occupied, in motion, alive */
  --bordeaux:  #A23838;   /* what needs attention — unpaid, alert, error */
  --encre:     #2A1F12;   /* text and structure, restrained black */

  /* Tints & shades — kept disciplined; only darker/lighter variants of the six */
  --parchemin-deep: #F2EBDA;
  --parchemin-edge: #E8DFC8;
  --safran-soft:    #E2B872;
  --safran-deep:    #9C6E22;
  --safran-glow:    rgba(192, 138, 58, 0.45);
  --olive-soft:     #B5C58F;
  --olive-deep:     #5A6F38;
  --terre-soft:     #DC9885;
  --terre-deep:     #9C4E36;
  --bordeaux-soft:  #C66A6A;
  --bordeaux-deep:  #7E2424;
  --encre-soft:     #5A4A38;
  --encre-mute:     #8A7A66;

  /* ---------- Semantic foreground/background ---------- */
  --fg-1:        var(--encre);          /* primary text */
  --fg-2:        var(--encre-soft);     /* secondary text */
  --fg-3:        var(--encre-mute);     /* tertiary, muted, captions */
  --fg-on-dark:  var(--parchemin);
  --fg-on-safran:var(--parchemin);

  --bg-page:     var(--parchemin);      /* the page itself */
  --bg-card:     #FFFDF7;               /* a slightly lifted parchment */
  --bg-sunk:     var(--parchemin-deep); /* recessed surface */
  --bg-rule:     var(--parchemin-edge); /* hairlines and dividers */
  --bg-ink:      var(--encre);          /* dark surfaces */

  /* ---------- State colors (mapped from the six) ---------- */
  --state-good:    var(--olive);        /* served, free, complete */
  --state-active:  var(--terre);        /* occupied, in motion */
  --state-alert:   var(--bordeaux);     /* unpaid, error, attention */
  --state-brand:   var(--safran);       /* primary, brand voice */

  /* ---------- Borders ---------- */
  --border-hair:   1px solid var(--parchemin-edge);
  --border-soft:   1px solid #DDD2B8;
  --border-strong: 1px solid var(--encre);

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;     /* cards, inputs — restrained */
  --radius-lg: 10px;    /* modals, large surfaces */
  --radius-pill: 999px; /* chips, pills */

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Shadows — never decorative, only weight ---------- */
  --shadow-hair:   0 1px 0 rgba(42, 31, 18, 0.04);
  --shadow-card:   0 1px 2px rgba(42, 31, 18, 0.05), 0 2px 8px rgba(42, 31, 18, 0.04);
  --shadow-lift:   0 6px 20px rgba(42, 31, 18, 0.08), 0 2px 6px rgba(42, 31, 18, 0.05);
  --shadow-modal:  0 20px 60px rgba(42, 31, 18, 0.18), 0 4px 12px rgba(42, 31, 18, 0.08);

  /* The "polished glow" — used behind primary CTAs on marketing surfaces */
  --glow-safran:   0 0 0 1px rgba(192, 138, 58, 0.25),
                   0 8px 24px -6px rgba(192, 138, 58, 0.55),
                   0 2px 6px -1px rgba(156, 110, 34, 0.35);
  --glow-safran-hover: 0 0 0 1px rgba(192, 138, 58, 0.35),
                       0 12px 32px -6px rgba(192, 138, 58, 0.7),
                       0 4px 10px -2px rgba(156, 110, 34, 0.45);
  --glow-encre:    0 8px 24px -6px rgba(42, 31, 18, 0.45),
                   0 2px 6px -1px rgba(42, 31, 18, 0.25);

  /* Inset for sunken inputs */
  --inset-input:   inset 0 1px 0 rgba(42, 31, 18, 0.04);

  /* ---------- Typography — Fraunces (display/serif) + Inter (UI) + JetBrains Mono ---------- */
  --font-serif:   "Fraunces", "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — editorial. Body sits at 15-16px; serif gets generous opsz on display */
  --fs-xs:     12px;
  --fs-sm:     13px;
  --fs-base:   15px;
  --fs-md:     17px;
  --fs-lg:     20px;
  --fs-xl:     24px;
  --fs-2xl:    32px;
  --fs-3xl:    44px;
  --fs-4xl:    60px;
  --fs-display:84px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-base:   1.5;
  --lh-loose:  1.65;

  /* Tabular figures everywhere money is shown */
  --feat-tabular: "tnum" 1, "lnum" 1;
  --feat-default: "ss01" 1, "kern" 1;

  /* Motion — fast, restrained */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.7, 0.1, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
}

/* ============================================================
   Element defaults — opt-in via .so-prose or directly on body.
   ============================================================ */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-feature-settings: var(--feat-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display headings — serif, optical-size aware (Fraunces) */
h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 100;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 60;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 36;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  margin: 0;
}

/* The italic descriptor — used like menu copy, sparingly */
.descriptor, .so-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--fg-2);
}

/* Greeting — Bonsoir, Admin. */
.greeting {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-variation-settings: "opsz" 48;
}
.greeting em, .greeting .you {
  font-style: italic;
  color: var(--encre-soft);
}

/* Body */
p, .p { margin: 0; font-size: var(--fs-base); color: var(--fg-1); }
.p-lead { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--fg-2); }
.caption { font-size: var(--fs-sm); color: var(--fg-3); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}

/* Money & numbers — tabular figures in the serif */
.money, .figure {
  font-family: var(--font-serif);
  font-feature-settings: var(--feat-tabular);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
}

/* Mono — for ticket lines, code, IDs */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--encre-soft);
}

/* Selection */
::selection { background: var(--safran); color: var(--parchemin); }