/*
 * Brand Tokens — "Cher Jacques,"
 * ==============================
 * Brand layer of the design system: colors, font stacks, wordmark.
 * Defines every semantic name in the brand contract (rails_template README);
 * the structural layer and component files only reference these names.
 *
 * The palette is Jacques Cœur's coat of arms read as a letter: ivory laid
 * paper, iron-gall blue-black ink (the azure of his fess, deepened), and
 * gules — the red of his three hearts — as the single accent. Or (gold) is
 * kept for warnings only.
 *
 * Type: IM FELL French Canon (17th-century letterpress, roman + italic) for
 * the wordmark and headings; Spectral (Production Type, Paris) for reading
 * and UI. Both self-hosted — @font-face rules live in fonts.css.
 *
 * Dark mode ("lettre à la chandelle") swaps paper and ink under
 * prefers-color-scheme, on screen only: paper is printed light whatever the
 * screen's scheme (light ink on a page without its background would vanish).
 * The neutral ramp inverts, as in the Midnight theme, so tooltips stay legible.
 */

:root {
  color-scheme: light dark;

  /* ==========================================
   * SURFACES — ivory laid paper
   * ========================================== */
  --paper:        #F3EBDC;   /* page background */
  --paper-soft:   #FBF7EF;   /* inputs, raised sheet */
  --paper-sunken: #E9DFCB;   /* sunken / disabled */
  --paper-warm:   #EDE3D0;   /* hover tint */

  /* ==========================================
   * INK — iron-gall blue-black
   * ========================================== */
  --ink:           #1B2140;
  --ink-secondary: #343A57;
  --ink-muted:     #5B5D70;   /* 5.4:1 on paper — smallest body copy */
  --ink-faint:     #868494;   /* decorative / large text only */
  --ink-disabled:  #B4AA97;
  --ink-inverse:   #F3EBDC;
  --ink-pressed:   #0E1229;

  /* ==========================================
   * LINES — folds and rules of the letter
   * ========================================== */
  --line:        #DCCFB6;
  --line-strong: #BFAE8E;
  --line-rule:   var(--ink);

  /* ==========================================
   * ACCENT — gules (heraldic heart-red)
   * The mark, the seal, the P.-S., links on hover. Never a wash.
   * ========================================== */
  --gules-50:  #F8E8E9;
  --gules-100: #F0CDD1;
  --gules-200: #E2A3AB;
  --gules-300: #CF6F7C;
  --gules-400: #B9404F;
  --gules-500: #9C1B2E;   /* MAIN — 6.8:1 on paper */
  --gules-600: #851626;
  --gules-700: #6C111F;
  --gules-800: #530D18;
  --gules-900: #3A0910;

  --accent:         var(--gules-500);
  --accent-hover:   var(--gules-600);
  --accent-pressed: var(--gules-700);
  --accent-soft:    var(--gules-50);
  --accent-tint:    var(--gules-100);

  /* ==========================================
   * SIGNALS — positive / negative / premium / info
   * Negative leans to rust so it never reads as the brand red.
   * Info is the heraldic azure; premium is the or.
   * ========================================== */
  --positive:         #2E6B4A;
  --positive-bg:      rgba(46, 107, 74, 0.10);
  --positive-tint:    #E1EDE4;
  --positive-strong:  #245A3D;
  --positive-pressed: #1A4630;
  --positive-border:  #A9CBB4;
  --positive-text:    #1F4F36;

  --negative:         #A8361A;
  --negative-bg:      rgba(168, 54, 26, 0.10);
  --negative-tint:    #F5E0D8;
  --negative-strong:  #8C2C14;
  --negative-pressed: #70230F;

  --premium:          #7D5F17;
  --premium-bg:       rgba(125, 95, 23, 0.12);
  --premium-tint:     #F1E4C4;
  --premium-strong:   #654C11;
  --premium-pressed:  #4E3A0C;

  --info:             #2B4A86;
  --info-bg:          rgba(43, 74, 134, 0.10);
  --info-tint:        #DDE4F1;
  --info-strong:      #1E3566;

  /* Dark surfaces — accent and quiet text tuned for ink backgrounds. */
  --accent-on-dark:    #E27A87;
  --ink-on-dark-muted: #B9B4C3;

  /* ==========================================
   * NEUTRAL RAMP — paper fading into ink
   * ========================================== */
  --color-gray-50:  #F7F2E8;
  --color-gray-100: #ECE4D4;
  --color-gray-200: #DCCFB6;
  --color-gray-300: #BFB39C;
  --color-gray-400: #96907F;
  --color-gray-500: #6F6D72;
  --color-gray-600: #50515F;
  --color-gray-700: #363A50;
  --color-gray-800: #232842;
  --color-gray-900: #141831;

  /* ==========================================
   * FONT STACKS
   * The "… Fallback" faces are Georgia with metric overrides (fonts.css),
   * so text keeps its box while the webfont loads.
   * ========================================== */
  --font-display: 'IM FELL French Canon', 'Fell Fallback', Georgia, 'Times New Roman', serif;
  --font-sans:    'Spectral', 'Spectral Fallback', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --paper:        #151A2E;
    --paper-soft:   #1C2238;
    --paper-sunken: #0F1325;
    --paper-warm:   #20263E;

    --ink:           #EEE6D6;
    --ink-secondary: #D5CDBE;
    --ink-muted:     #A9A6B5;
    --ink-faint:     #807E90;
    --ink-disabled:  #575A6E;
    --ink-inverse:   #151A2E;
    --ink-pressed:   #FFF8EA;

    --line:        #2C3350;
    --line-strong: #4A5170;

    --accent:         #E27A87;
    --accent-hover:   #EA939E;
    --accent-pressed: #F0A9B1;
    --accent-soft:    #2A2138;
    --accent-tint:    #3B2538;

    --positive:         #7CC39B;
    --positive-bg:      rgba(124, 195, 155, 0.12);
    --positive-tint:    #1B2E2F;
    --positive-strong:  #96D2B0;
    --positive-pressed: #B0DEC4;
    --positive-border:  #2F5A48;
    --positive-text:    #A6D9BB;

    --negative:         #EE8A66;
    --negative-bg:      rgba(238, 138, 102, 0.12);
    --negative-tint:    #33232C;
    --negative-strong:  #F3A587;
    --negative-pressed: #F7BDA6;

    --premium:          #D9B25C;
    --premium-bg:       rgba(217, 178, 92, 0.12);
    --premium-tint:     #2E2A2C;
    --premium-strong:   #E4C47E;
    --premium-pressed:  #ECD39C;

    --info:             #8FAEE6;
    --info-bg:          rgba(143, 174, 230, 0.12);
    --info-tint:        #1F2A48;
    --info-strong:      #B3C8EE;

    --accent-on-dark:    #E27A87;
    --ink-on-dark-muted: #A9A6B5;

    --color-gray-50:  #141831;
    --color-gray-100: #1C2238;
    --color-gray-200: #2C3350;
    --color-gray-300: #454C6A;
    --color-gray-400: #6A6E86;
    --color-gray-500: #8E8FA2;
    --color-gray-600: #ADACBA;
    --color-gray-700: #CBC6C6;
    --color-gray-800: #E3DCCD;
    --color-gray-900: #F3EBDC;
  }
}

:root:root {
  /* ==========================================
   * STRUCTURAL NUDGES — near-square corners, like cut paper.
   * :root:root (0,0,2,0) beats 00-tokens-structural.css despite loading
   * first; override at matching-or-higher specificity.
   * ========================================== */
  --btn-border-radius:   var(--radius-sm);
  --input-border-radius: var(--radius-sm);
  /* ink-faint keeps input edges at 3:1 or more (WCAG 1.4.11): 3.42:1 on
     paper-soft in light, 3.97:1 in dark. Hover steps up to ink-muted (site.css). */
  --input-border-color:  var(--ink-faint);
  --toast-border-radius: var(--radius-sm);
}

/* ==========================================
 * WORDMARK — "Cher Jacques," in Fell italic.
 * The trailing comma is part of the name: it opens a letter.
 * ========================================== */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-mark {
  width: 1.05em;
  height: auto;
  flex: none;
  color: var(--accent);
  translate: 0 -0.06em;
}
.wordmark-accent { color: var(--accent); }
.wordmark-italic {
  font-style: italic;
  font-weight: var(--font-weight-normal);
}