/*
 * Design Tokens — Direction 1 "Warm Beige" (PHASE 2.5 redesign handoff)
 * Source of truth: design_handoff_anekanet_isp/styles.css (.dir-d1.theme-light)
 * Palette: warm beige + brick-red accent (primary) + ok/warn/danger/info
 *
 * IMPORTANT — no var() cross-references here. The 8 existing pages alias the
 * DESIGN vocabulary to the LEGACY names in their own :root (e.g. --accent:var(--navy),
 * --text:var(--fg)). If this file aliased back the other way (--navy:var(--accent))
 * it would form a custom-property cycle and every token would resolve to empty.
 * So every value below is a literal; design-native and legacy names that mean the
 * same thing simply carry the same hex. Legacy --navy == brick-red accent (d1 has
 * no navy; primary == accent).
 */

/* ── Self-hosted webfonts (d1) — SIL OFL, di-host lokal (zero request eksternal) ── */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-tight-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-tight-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-tight-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root {
    /* ── Surfaces ── */
    --bg:            #F2EFE6;   /* page background — warm beige */
    --bg-elev:       #F8F5EC;   /* cards / elevated */
    --bg-sunken:     #E8E2D2;   /* sunken / track */
    --surface:       #F8F5EC;   /* card surface (legacy pages use --surface for cards) */
    --surface-alt:   #EDE7D6;   /* alt / hover */
    --surface-soft:  #EDE7D6;   /* legacy alias of surface-alt */
    --surface-strong:#E8E2D2;   /* legacy alias of bg-sunken */

    /* ── Text ── */
    --text:          #2D2A24;
    --text-muted:    #6B6358;
    --text-subtle:   #95897A;
    --fg:            #2D2A24;    /* legacy */
    --muted:         #6B6358;    /* legacy */
    --subtle:        #95897A;    /* legacy */

    /* ── Borders ── */
    --border:        #DDD3BC;
    --border-strong: #C7B998;

    /* ── Accent (primary action) — brick red ── */
    --accent:        #B23A3A;
    --accent-soft:   #ECD9D2;
    --accent-text:   #8C2828;
    --accent-hover:  #9B3030;

    /* ── Status ── */
    --ok:        #4A7C3F;  --ok-soft:   #DCE6CC;  --ok-text:   #355829;
    --warn:      #C28B2C;  --warn-soft: #F2E5C7;  --warn-text: #7A5118;
    --danger:    #B23A3A;  --danger-soft: #ECD9D2; --danger-text: #8C2828;
    --info:      #3F6B7C;  --info-soft: #D2E2E8;  --info-text: #2C4D5A;

    /* ── Brand ── */
    --brand-red:      #B23A3A;
    --brand-red-soft: #ECD9D2;

    /* ── Legacy primary aliases — literal so no cycle with page :root blocks ── */
    --navy:        #B23A3A;
    --navy-soft:   #ECD9D2;
    --red:         #B23A3A;
    --red-soft:    #ECD9D2;

    /* ── Shadows ── */
    --shadow-sm: 0 2px 6px color-mix(in srgb, #2D2A24 8%, transparent);
    --shadow:    0 14px 36px color-mix(in srgb, #2D2A24 12%, transparent);
    --shadow-lg: 0 28px 70px color-mix(in srgb, #2D2A24 16%, transparent);

    /* ── Radius (d1 shape rules: card 14 / btn 10 / pill 999) ── */
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;

    /* ── Typography (d1: Inter Tight sans + JetBrains Mono + serif display) ── */
    --font-sans:    "Inter Tight", "SF Pro Display", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
    --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body:    "Inter Tight", "SF Pro Display", system-ui, -apple-system, sans-serif;
}

/* Respect user's motion preference — kept here so all pages inherit */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}