/*
 * PromptSearch brand tokens.
 * Source of truth for colour, type and shape. Spec: docs/brand/README.md
 *
 * This file only defines custom properties, it styles nothing by itself.
 * Dark mode follows the site's existing switch: <html class="dark">.
 * The same values are mirrored in the Tailwind config in templates/header.html
 * (colors.primary, colors.pt) once step 2 of docs/brand/APPLY.md is done.
 */

:root {
    /* ---- palette (in components prefer the roles below) ---- */
    --pt-amber-50: #FFFAEB;
    --pt-amber-100: #FFF4D1;
    --pt-amber-200: #FFE08A;
    --pt-amber-500: #FFC107;   /* the point colour */
    --pt-amber-600: #E0A800;   /* pressed / hover */
    --pt-amber-700: #8F6500;   /* smallest amber that reads as text on white, 5.2:1 */
    --pt-amber-text: #7A5600;  /* amber as TEXT on light grounds, 6.7:1 on white */
    --pt-ink: #161616;
    --pt-graphite: #292929;
    --pt-slate: #5C5C5C;
    --pt-ash: #8C8C8C;
    --pt-mist: #BDBDBD;
    --pt-line: #DCDCDC;
    --pt-fog: #EBEBEB;
    --pt-paper: #FFFFFF;
    --pt-signal: #B83131;

    /* ---- roles, light ---- */
    --pt-bg: #F3F4F6;                     /* page ground, same as the current bg-gray-100 */
    --pt-surface: var(--pt-paper);        /* cards, sidebar */
    --pt-surface-2: #F4F4F5;
    --pt-border: rgba(0, 0, 0, .1);       /* dividers, card outlines */
    --pt-border-strong: #757575;          /* input and control outlines, 3:1 */
    --pt-text: var(--pt-ink);
    --pt-text-muted: var(--pt-slate);
    --pt-accent: var(--pt-amber-500);     /* FILLS only: buttons, selected state, logo */
    --pt-accent-hover: var(--pt-amber-600);
    --pt-on-accent: var(--pt-ink);        /* text and icons on an amber fill */
    --pt-accent-text: var(--pt-amber-text); /* links and accent-coloured text */
    --pt-accent-soft: var(--pt-amber-100);  /* selected row, highlight ground */
    --pt-danger: var(--pt-signal);
    --pt-focus-ring: var(--pt-ink);

    /* ---- type ---- */
    --pt-font-display: 'Bricolage Grotesque', 'IBM Plex Sans KR', 'IBM Plex Sans', 'Noto Sans KR', sans-serif;
    /* IBM Plex Sans comes before Plex Sans JP: Plex KR has no Cyrillic, and Plex JP's Cyrillic is
       full-width (1em per letter) and misses і ї є ґ, which made Russian and Ukrainian look spaced out. */
    --pt-font-text: 'IBM Plex Sans KR', 'IBM Plex Sans', 'IBM Plex Sans JP', 'Noto Sans KR', 'Noto Sans JP',
                    'Noto Sans SC', 'Noto Sans TC', sans-serif;
    /* Plex Mono has Latin, Greek and Cyrillic but no Hangul, kana or Hanzi. Without CJK faces right after it,
       Korean prompts skipped past ui-monospace/Consolas (also no Hangul) to the OS fallback, a bitmap-like
       GulimChe on Windows. Plex Sans KR/JP are the same family, so mixed prompts still read as one face. */
    --pt-font-mono: 'IBM Plex Mono', 'IBM Plex Sans KR', 'IBM Plex Sans JP', 'Noto Sans KR', 'Noto Sans JP',
                    'Noto Sans SC', 'Noto Sans TC', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --pt-text-display: 800 3.5rem/1 var(--pt-font-display);
    --pt-text-h1: 700 2rem/1.25 var(--pt-font-text);
    --pt-text-h2: 600 1.375rem/1.35 var(--pt-font-text);
    --pt-text-body: 400 0.9375rem/1.65 var(--pt-font-text);
    --pt-text-caption: 400 0.8125rem/1.55 var(--pt-font-text);
    --pt-text-mono: 400 0.8125rem/1.55 var(--pt-font-mono);

    /* ---- shape ---- */
    --pt-radius-sm: 8px;
    --pt-radius-md: 12px;
    --pt-radius-lg: 16px;
    --pt-radius-pill: 999px;
    --pt-tile-radius: 22.7%;   /* logo tile and function tiles, relative to the side */
}

/* ---- roles, dark ---- */
html.dark {
    --pt-bg: var(--pt-graphite);          /* page ground, next to the current bg-neutral-800 */
    --pt-surface: #333333;                /* cards on the page ground */
    --pt-surface-2: #3D3D3D;
    --pt-border: rgba(255, 255, 255, .1);
    --pt-border-strong: var(--pt-ash);
    --pt-text: #F4F4F5;
    --pt-text-muted: var(--pt-mist);
    --pt-accent-text: var(--pt-amber-500);   /* 8.9:1 on Graphite, 7.8:1 on cards */
    --pt-accent-soft: rgba(255, 193, 7, .16);
    --pt-danger: #F08A8A;                    /* Signal is too dark to read on dark grounds */
    --pt-focus-ring: var(--pt-amber-500);
}

/* ---- text face per page language (docs/brand/README.md 4) ----
   <html lang> comes from LANGUAGE_CODE. Korean user content on any page still falls back to Plex KR. */
html[lang="ja"] {
    --pt-font-text: 'IBM Plex Sans JP', 'IBM Plex Sans', 'Noto Sans JP', 'IBM Plex Sans KR', 'Noto Sans KR', sans-serif;
    --pt-font-mono: 'IBM Plex Mono', 'IBM Plex Sans JP', 'Noto Sans JP', 'IBM Plex Sans KR', 'Noto Sans KR',
                    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
html[lang="zh-hans"] {
    --pt-font-text: 'Noto Sans SC', 'IBM Plex Sans', 'IBM Plex Sans KR', 'Noto Sans KR', sans-serif;
    --pt-font-mono: 'IBM Plex Mono', 'Noto Sans SC', 'IBM Plex Sans KR', 'Noto Sans KR',
                    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
html[lang="zh-hant"] {
    --pt-font-text: 'Noto Sans TC', 'IBM Plex Sans', 'IBM Plex Sans KR', 'Noto Sans KR', sans-serif;
    --pt-font-mono: 'IBM Plex Mono', 'Noto Sans TC', 'IBM Plex Sans KR', 'Noto Sans KR',
                    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
html[lang="ru"], html[lang="uk"], html[lang="es"], html[lang="en"], html[lang="en-us"] {
    --pt-font-text: 'IBM Plex Sans', 'IBM Plex Sans KR', 'IBM Plex Sans JP', 'Noto Sans KR', 'Noto Sans JP',
                    'Noto Sans SC', 'Noto Sans TC', sans-serif;
}