/* =============================================================================
 * Nilefy design tokens — pulled from the "Nilefy Design System" project
 * (637b793c-4558-4623-aa28-d578e4dbfec2) via DesignSync. This file is a
 * CONCATENATION of that project's tokens/*.css, not a re-interpretation:
 * colors · typography · spacing · radius · elevation · motion · themes.
 *
 * Do not hand-edit values here. Re-pull from the design project instead, so
 * the site and the player can never drift from the brand.
 *
 * The fonts block below is the one deliberate divergence: the design project
 * loads IBM Plex from the Google Fonts CDN, and this demo self-hosts the
 * latin/latin-ext subsets (site/public/brand/fonts/) so a gated demo behind a
 * proxy has no third-party font dependency.
 * ===========================================================================*/

/* ---- fonts (self-hosted subsets; Plex Sans is variable, 400-600 in one file) */
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600;
  font-stretch:100%; font-display:swap;
  src:url('/brand/fonts/plex-sans-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600;
  font-stretch:100%; font-display:swap;
  src:url('/brand/fonts/plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/brand/fonts/plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/brand/fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/brand/fonts/plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/brand/fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- colour ---------------------------------------------------------------
 * The neutral ramp IS the palette. ~90% of every screen is warm-neutral grey.
 * Exactly three meanings: signal (teal) = the Nilefy measured result ·
 * error = errors + destructive · neutral = everything else. */
:root{
  /* neutral spine — whisper-warm, deliberately not blue-black */
  --paper:#FBFAF9;
  --n-50:#F3F2F0;
  --n-100:#E6E5E2;
  --n-200:#CDCCC8;
  --n-300:#A8A7A2;
  --n-400:#82817C;
  --n-500:#5E5D59;
  --n-600:#454440;
  --n-700:#2E2D2A;
  --n-800:#1D1D1B;
  --n-900:#141412;
  --ink:#0D0D0C;

  /* signal — the one accent. Colour of scopes and vectorscopes. Thin use only. */
  --signal:#14C9B0;        /* on dark */
  --signal-deep:#0A8265;   /* signal as text/fill on light — AA-safe */

  /* error — errors and destructive actions only, never decorative */
  --error-on-light:#A32D2D;
  --error-on-dark:#E24B4A;
}

/* ---- typography -----------------------------------------------------------
 * IBM Plex, three roles — sans = chrome, mono = evidence (numbers only),
 * serif = studio editorial voice. Weight follows role, not size.
 * Nothing above 600. Sentence case everywhere. */
:root{
  --font-sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --font-serif:'IBM Plex Serif', Georgia, serif;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  /* scale — tuned to use, not a ratio. Gaps widen as they climb;
     line-height inverts with size. */
  --text-display:44px;   --leading-display:1.0; --tracking-display:-0.02em; --weight-display:500;
  --text-h1:32px;        --leading-h1:1.1;      --tracking-h1:-0.02em;      --weight-h1:600;
  --text-h2:24px;        --leading-h2:1.2;      --tracking-h2:-0.01em;      --weight-h2:600;
  --text-h3:18px;        --leading-h3:1.3;      --tracking-h3:0;            --weight-h3:500;
  --text-body:16px;      --leading-body:1.6;
  --text-small:14px;     --leading-small:1.5;
  --text-caption:12px;   --leading-caption:1.4;

  --text-button:15px;
  --text-field:15px;
  --text-label:13px;
}

/* ---- spacing --------------------------------------------------------------
 * 4px base grid, but live in a subset. Pick from these eight — never invent a
 * 13 or a 27. 4/8/16/24 for component-internal space; 32/48/64 for section
 * rhythm. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;

  /* layout geometry — locked, not studio-flexible */
  --measure:680px;      /* reading column */
  --page-max:1040px;    /* page max width */
  --page-gutter:32px;
  --section-pad:56px;
  --section-pad-mobile:44px;
}

/* ---- radius --------------------------------------------------------------- */
:root{
  --radius-control:9px;   /* buttons, inputs, chips */
  --radius-card:12px;     /* cards, imagery, video stages */
  --radius-panel:16px;    /* outer panels */
  --radius-badge:8px;     /* the over-video badge pill */
  --radius-icon-tile:22%; /* the knockout logo tile: 22 on a 100-unit square */
}

/* ---- elevation ------------------------------------------------------------
 * Borders are a last resort. Separation is space first, then a faint shadow
 * (light) or a raised fill (dark). There is no shadow on dark — depth comes
 * from the fill step. */
:root{
  --shadow-resting-light:0 1px 2px rgba(20,20,18,0.04), 0 8px 24px rgba(20,20,18,0.06);
  --shadow-raised-light:0 2px 6px rgba(20,20,18,0.06), 0 18px 48px rgba(20,20,18,0.12);
  --shadow-none:none;

  --scrim-video:linear-gradient(to top, rgba(13,13,12,0.85) 0%, rgba(13,13,12,0.15) 42%, transparent 62%);
  --scrim-pill:rgba(13,13,12,0.5);
  --scrim-dialog-light:rgba(20,20,18,0.28);
  --scrim-dialog-dark:rgba(0,0,0,0.5);
  --focus-ring:0 0 0 3px rgba(20,201,176,0.35);
}

/* ---- motion ---------------------------------------------------------------
 * Two motions. Settle is the grammar; resolve is the signature and is
 * MEDIA ONLY. */
:root{
  --settle-duration:340ms;
  --settle-easing:cubic-bezier(0.22,0.61,0.36,1);
  --settle-stagger:50ms;
  --settle-rise:8px;

  --resolve-duration:900ms;
  --resolve-easing:cubic-bezier(0.4,0,0.2,1);

  --transition-state:160ms;
}
@keyframes nlf-settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes nlf-resolve{0%{filter:blur(14px) contrast(.7) brightness(.9);transform:scale(1.04)}100%{filter:blur(0) contrast(1) brightness(1);transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  @keyframes nlf-settle{from{opacity:0}to{opacity:1}}
}

/* ---- semantic aliases -----------------------------------------------------
 * Dark is the default theme — you cannot judge a picture against white.
 * The matte directly bordering a moving image never flexes: it is always
 * --matte. */
:root,
[data-theme="dark"]{
  --bg:#0D0D0C;
  --surface-page:#0D0D0C;
  --surface-card:#141412;
  --surface-raised:#1D1D1B;
  --surface-field:#1D1D1B;
  --hairline:#1D1D1B;
  --border-secondary:#2E2D2A;

  --text-primary:#F3F2F0;
  --text-secondary:#A8A7A2;
  --text-muted:#8E8D88;
  --text-on-signal:#0D0D0C;
  --rest-underline:#6E6D68;

  --logo-color:#FBFAF9;
  --sig:#14C9B0;
  --sig-wash:rgba(20,201,176,0.12);
  --err:#E24B4A;

  --shadow-resting:none;
  --shadow-raised:none;
  --scrim-dialog:rgba(0,0,0,0.5);

  --matte:#0D0D0C;
}
[data-theme="light"]{
  --bg:#FBFAF9;
  --surface-page:#FBFAF9;
  --surface-card:#FFFFFF;
  --surface-raised:#F3F2F0;
  --surface-field:#F3F2F0;
  --hairline:#E6E5E2;
  --border-secondary:#CDCCC8;

  --text-primary:#141412;
  --text-secondary:#5E5D59;
  --text-muted:#6E6D68;
  --text-on-signal:#FBFAF9;
  --rest-underline:#82817C;

  --logo-color:#0D0D0C;
  --sig:#0A8265;
  --sig-wash:rgba(10,130,101,0.12);
  --err:#A32D2D;

  --shadow-resting:0 1px 2px rgba(20,20,18,0.04), 0 8px 24px rgba(20,20,18,0.06);
  --shadow-raised:0 2px 6px rgba(20,20,18,0.06), 0 18px 48px rgba(20,20,18,0.12);
  --scrim-dialog:rgba(20,20,18,0.28);

  --matte:#0D0D0C;
}

/* ---- base + type roles ---------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--text-primary);
  font-family:var(--font-sans); font-weight:var(--weight-regular);
  line-height:var(--leading-body); -webkit-font-smoothing:antialiased;
  transition:background var(--settle-duration) var(--settle-easing),
             color var(--settle-duration) var(--settle-easing);
}
a{color:var(--sig);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
::selection{background:var(--sig-wash);color:var(--text-primary)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.nlf-display{font-weight:var(--weight-display);font-size:var(--text-display);letter-spacing:var(--tracking-display);line-height:var(--leading-display)}
.nlf-h1{font-weight:var(--weight-h1);font-size:var(--text-h1);letter-spacing:var(--tracking-h1);line-height:var(--leading-h1)}
.nlf-h2{font-weight:var(--weight-h2);font-size:var(--text-h2);letter-spacing:var(--tracking-h2);line-height:var(--leading-h2)}
.nlf-h3{font-weight:var(--weight-h3);font-size:var(--text-h3);line-height:var(--leading-h3)}
.nlf-body{font-weight:var(--weight-regular);font-size:var(--text-body);line-height:var(--leading-body)}
.nlf-small{font-weight:var(--weight-regular);font-size:var(--text-small);line-height:var(--leading-small)}
.nlf-caption{font-weight:var(--weight-regular);font-size:var(--text-caption);line-height:var(--leading-caption)}
.nlf-mono{font-family:var(--font-mono)}

.nlf-settle>*{animation:nlf-settle var(--settle-duration) var(--settle-easing) both}
.nlf-settle>*:nth-child(2){animation-delay:50ms}
.nlf-settle>*:nth-child(3){animation-delay:100ms}
.nlf-settle>*:nth-child(4){animation-delay:150ms}
.nlf-settle>*:nth-child(5){animation-delay:200ms}
@media (prefers-reduced-motion:reduce){.nlf-settle>*{animation-duration:.01s}}