/* Café Gratis design tokens
 * Source of truth: the sandwich board art (gratisv6.pdf, Jesuits West, Mar 2026).
 * Colors sampled from a 200 dpi render of that file. Contrast ratios are WCAG 2.x,
 * computed against the hex values below. Load fonts with:
 * <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700&family=Lilita+One&display=swap">
 * Light "paper" is the default look (the board and the hand signs are printed on white).
 * A dark theme follows prefers-color-scheme, and a manual choice wins: set
 * data-theme="light" or data-theme="dark" on <html>. In dark, the logo and board art
 * always sit on a paper panel (.cg-art); never invert or recolor them.
 */
:root {
  /* ---- Board palette: raw colors, as printed ---- */
  --cg-red: #ed4827;      /* C, R(=I) letters */
  --cg-orange: #f48220;   /* A, G */
  --cg-pink: #f37e96;     /* F, R; concha topping */
  --cg-green: #1e9147;    /* É, A */
  --cg-yellow: #fec717;   /* T; concha base */
  --cg-teal: #65c8ca;     /* S */
  --cg-blue: #1f6ab0;     /* the cup, the sleeves */
  --cg-brown: #964a22;    /* coffee, the hands */
  --cg-ink: #231f20;      /* "THE HOSPITALITY TABLE", "ALL ARE WELCOME" */

  /* Text-safe deeper versions (only where a board color must carry small text) */
  --cg-red-deep: #d73312;   /* 4.62 on paper, 4.80 with white text */
  --cg-green-deep: #1b8240; /* 4.68 on paper, 4.87 with white text */

  /* Neutrals and tints */
  --cg-paper: #fffaf2;    /* page ground: warm white, like foam board under a tent */
  --cg-white: #ffffff;    /* cards, the logo's own ground */
  --cg-ink-soft: #5c5557; /* secondary text, 6.99 on paper */
  --cg-sun: #fff3cf;      /* yellow tint */
  --cg-blush: #fde4e9;    /* pink tint */
  --cg-sky: #e4f0f9;      /* blue tint */
  --cg-mint: #e3f3ea;     /* green tint */

  /* ---- Semantic roles (use these in components) ---- */
  --color-bg: var(--cg-paper);
  --color-surface: var(--cg-white);
  --color-text: var(--cg-ink);         /* 15.69 on paper */
  --color-text-muted: var(--cg-ink-soft);
  --color-link: var(--cg-blue);        /* 5.39 on paper, 4.84 on sky */
  --color-line: var(--cg-ink);
  --color-focus: var(--cg-ink);
  --color-shadow: var(--cg-ink);
  --color-accent: var(--cg-blue);      /* Spanish hero line, 5.39 on paper */
  --color-quote: var(--cg-brown);      /* 6.12 on paper, 6.36 on white */
  --color-event-bg: var(--cg-sun);     /* ink 13.55+ */
  --color-note-bg: var(--cg-sun);      /* placeholder notes */
  --color-art-panel: transparent;      /* paper panel behind logo art; visible in dark */
  --color-art-line: transparent;
  --color-band: var(--cg-sky);         /* ink 13.55+, link 4.84 */
  color-scheme: light;

  /* Approved fill + text pairs (all pass AA for body text, 4.5+) */
  --pair-orange-bg: var(--cg-orange);  --pair-orange-fg: var(--cg-ink);  /* 6.26 */
  --pair-pink-bg: var(--cg-pink);      --pair-pink-fg: var(--cg-ink);    /* 6.39 */
  --pair-yellow-bg: var(--cg-yellow);  --pair-yellow-fg: var(--cg-ink);  /* 10.40 */
  --pair-teal-bg: var(--cg-teal);      --pair-teal-fg: var(--cg-ink);    /* 8.28 */
  --pair-blue-bg: var(--cg-blue);      --pair-blue-fg: var(--cg-white);  /* 5.60 */
  --pair-brown-bg: var(--cg-brown);    --pair-brown-fg: var(--cg-white); /* 6.36 */
  --pair-red-bg: var(--cg-red-deep);   --pair-red-fg: var(--cg-white);   /* 4.80 */
  --pair-green-bg: var(--cg-green-deep); --pair-green-fg: var(--cg-white); /* 4.87 */
  --pair-ink-bg: var(--cg-ink);        --pair-ink-fg: var(--cg-paper);   /* 15.69 */
  /* Raw orange, pink, teal and yellow never carry text on paper (1.5 to 2.5).
     Raw red (3.64) and green (3.89) on paper are allowed only for display text 24px+. */

  /* The letter sequence of CAFÉ GRATIS, used for the confetti stripe */
  --confetti: linear-gradient(90deg,
    var(--cg-red) 0 10%, var(--cg-orange) 0 20%, var(--cg-pink) 0 30%, var(--cg-green) 0 40%,
    var(--cg-orange) 0 50%, var(--cg-pink) 0 60%, var(--cg-green) 0 70%, var(--cg-yellow) 0 80%,
    var(--cg-red) 0 90%, var(--cg-teal) 0 100%);

  /* ---- Type ---- */
  /* Display: Lilita One, the closest Google face to the board's chunky cut letters.
     Labels and body: Jost, a stand-in for the board's Brandon Grotesque. */
  --font-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Jost", "Noto Sans Arabic", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --text-xs: 0.875rem;   /* 14px  captions */
  --text-sm: 1rem;       /* 16px  labels, meta */
  --text-md: 1.125rem;   /* 18px  body */
  --text-lg: 1.375rem;   /* 22px  lead */
  --text-xl: 1.75rem;    /* 28px  h3 */
  --text-2xl: 2.25rem;   /* 36px  h2 */
  --text-3xl: clamp(2.5rem, 6vw + 1rem, 4.25rem); /* 40 to 68px  h1 */

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --tracking-label: 0.08em;  /* uppercase Jost Bold, like the arc */
  --tracking-light: 0.04em;  /* uppercase Jost Light, like ALL ARE WELCOME */
  --measure: 62ch;

  /* ---- Space (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --page-max: 72rem;
  --gutter: max(16px, 4vw);

  /* ---- Shape ---- */
  --line: 2.5px solid var(--color-line);   /* marker line */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;
  /* Hand-cut corners: slightly uneven, like a trimmed board */
  --radius-sign: 14px 6px 12px 8px / 8px 12px 6px 14px;

  /* Hard offset shadow, like a printed sticker. No blur anywhere. */
  --shadow: 4px 4px 0 var(--color-shadow);
  --shadow-lift: 6px 6px 0 var(--color-shadow);
  --shadow-press: 1px 1px 0 var(--color-shadow);

  --tilt-left: rotate(-1.2deg);
  --tilt-right: rotate(1deg);
  --ease: cubic-bezier(.2, .8, .3, 1);
  --dur: 140ms;
}

/* ---- Dark theme ----
 * Same brand colors on a warm coffee-black ground. Button fills keep their light-mode
 * pairs (the text color is set by the fill, not the page). Contrast (WCAG 2.x):
 * text 16.92 on bg, 15.04 on surface, 12.52 on event card; muted 10.38 / 9.22 / 7.68;
 * link and accent 9.16 / 8.15 / 6.78; quote 7.67 on surface; focus yellow 11.22 on bg;
 * band #1d2b3a: text 13.85, link 7.50.
 * The two blocks below must stay identical: the first follows the OS setting unless the
 * visitor picked light, the second applies when they picked dark.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1c1819;
    --color-surface: #282223;
    --color-text: var(--cg-paper);
    --color-text-muted: #cfc5bf;
    --color-link: #8fc0ee;
    --color-line: #e8dccb;
    --color-focus: var(--cg-yellow);
    --color-shadow: #6e5f57;
    --color-accent: #8fc0ee;
    --color-quote: #eaa77a;
    --color-event-bg: #3a3016;
    --color-note-bg: #3a3016;
    --color-art-panel: var(--cg-paper);
    --color-art-line: var(--cg-ink);
    --color-band: #1d2b3a;
    --pair-ink-bg: var(--cg-paper); --pair-ink-fg: var(--cg-ink);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #1c1819;
  --color-surface: #282223;
  --color-text: var(--cg-paper);
  --color-text-muted: #cfc5bf;
  --color-link: #8fc0ee;
  --color-line: #e8dccb;
  --color-focus: var(--cg-yellow);
  --color-shadow: #6e5f57;
  --color-accent: #8fc0ee;
  --color-quote: #eaa77a;
  --color-event-bg: #3a3016;
  --color-note-bg: #3a3016;
  --color-art-panel: var(--cg-paper);
  --color-art-line: var(--cg-ink);
  --color-band: #1d2b3a;
  --pair-ink-bg: var(--cg-paper); --pair-ink-fg: var(--cg-ink);
  color-scheme: dark;
}