/* Variables Start */
/* ------------------------------------------------*/

:root {
  --_size: 1.8rem;
  --_font-default: "Funnel Sans", sans-serif;
  --_font-accent: "Funnel Display", sans-serif;

  --_radius-s: 1rem;
  --_radius-m: 1.6rem;
  --_radius-pt-m: 1.6rem;
  --_radius-l: 3.8rem;
  --_radius-xl: 6rem;

  --_animspeed-fast: 0.1s;
  --_animspeed-medium: 0.3s;
  --_animspeed-slow: 0.6s;
  --_animbezier: cubic-bezier(0.23, 0.65, 0.74, 1.09);

  color-scheme: light dark;

  /* ==================================================
     DBETA BRAND DIRECTION
     Engineered systems.
     Structured intelligence.
     Technical clarity.
  ================================================== */

  --brand-black: #0D0D0D;
  --brand-white: #FFFFFF;
  --brand-blue: #0052FF;

  --brand-surface-dark: #161616;
  --brand-surface-deep: #050505;
  --brand-surface-light: #F7F8FA;
  --brand-surface-muted: #E3E6EA;

  --brand-graphite: #1F232A;
  --brand-steel: #2B2F36;
  --brand-slate: #5F6672;
  --brand-muted: #8A9099;
  --brand-muted-soft: #A8AFBA;

  --brand-blue-soft: #7DA2FF;
  --brand-blue-dark: #002378;


  /* ==================================================
     DBETA LIGHT COLOR SCHEME
     Technical clarity, high contrast, clean structure
  ================================================== */

  --base--light: #F7F8FA;
  --base-rgb--light: 247, 248, 250;
  --base-tint--light: #FFFFFF;
  --base-shade--light: #E3E6EA;

  --base-opp--light: #0D0D0D;
  --base-opp-tint--light: #161616;

  --accent--light: #0052FF;
  --accent-text--light: #0052FF;
  --accent-rgb--light: 0, 82, 255;

  --additional--light: #0052FF;
  --additional-rgb--light: 31, 35, 42;

  --neutral-transparent--light: rgba(13, 13, 13, 0.06);

  --st-bright--light: #0D0D0D;
  --st-medium--light: #6B7280;
  --st-muted--light: #DDE1E7;
  --st-opp-bright--light: #FFFFFF;

  --fw-regular--light: 400;
  --fw-medium--light: 600;
  --fw-semibold--light: 700;
  --fw-bold--light: 800;
  --fw-regular-opp--light: 400; /* B51 (Owner 2026-11-04): handoff guide, Geist 400/500/600 only */
  --fw-medium-opp--light: 500;

  --t-bright--light: #0D0D0D;
  --t-medium--light: #2B2F36;
  --t-muted--light: #5F6672;
  --t-muted-extra--light: #A8AFBA;

  --t-opp-bright--light: #FFFFFF;
  --t-opp-medium--light: #C4C8CF;
  --t-opp-muted--light: #8A9099;

  
  --bg-demo-screen-01--light: url(../img/demo/screens/01.webp);
  --bg-demo-screen-02--light: url(../img/demo/screens/02.webp);
  --bg-demo-screen-03--light: url(../img/demo/screens/03.webp);
  --bg-demo-screen-04--light: url(../img/demo/screens/04.webp);
  --bg-demo-screen-05--light: url(../img/demo/screens/05.webp);
  --bg-demo-screen-06--light: url(https://dbeta.b-cdn.net/icon/dbeta-bones-ipad.png);
  --bg-demo-screen-07--light: url(../img/demo/screens/07.webp);
  --bg-demo-screen-08--light: url(../img/demo/screens/08.webp);
  --bg-demo-screen-09--light: url(../img/demo/screens/09.webp);


  /* ==================================================
     DBETA DARK COLOR SCHEME
     Primary brand environment
     Engineered, structured, intelligent
  ================================================== */

  --base--dark: #0D0D0D;
  --base-rgb--dark: 13, 13, 13;
  --base-tint--dark: #161616;
  --base-shade--dark: #050505;

  --base-opp--dark: #F7F8FA;
  --base-opp-tint--dark: #FFFFFF;

  --accent--dark: #0052FF;
  /* Brand blue as text is 3.1-3.4:1 on the dark backgrounds; this lighter tint is 5.3-5.7:1 (WCAG AA). */
  --accent-text--dark: #4D86FF;
  --accent-rgb--dark: 0, 82, 255;

  --additional--dark: #7DA2FF;
  --additional-rgb--dark: 125, 162, 255;

  --neutral-transparent--dark: rgba(255, 255, 255, 0.08);

  --st-bright--dark: #FFFFFF;
  --st-medium--dark: #5C626D;
  --st-muted--dark: #1F232A;
  --st-opp-bright--dark: #0D0D0D;

  --fw-regular--dark: 400; /* B51: was 300 */
  --fw-medium--dark: 500;
  --fw-semibold--dark: 600;
  --fw-bold--dark: 700;
  --fw-regular-opp--dark: 400;
  --fw-medium-opp--dark: 600;

  --t-bright--dark: #FFFFFF;
  --t-medium--dark: #C4C8CF;
  --t-muted--dark: #8A9099;
  --t-muted-extra--dark: #555B65;

  --t-opp-bright--dark: #0D0D0D;
  --t-opp-medium--dark: #2B2F36;
  --t-opp-muted--dark: #6B7280;

  --bg-demo-screen-01--dark: url(../img/demo/screens/01-d.webp);
  --bg-demo-screen-02--dark: url(../img/demo/screens/02-d.webp);
  --bg-demo-screen-03--dark: url(../img/demo/screens/03-d.webp);
  --bg-demo-screen-04--dark: url(../img/demo/screens/04-d.webp);
  --bg-demo-screen-05--dark: url(../img/demo/screens/05-d.webp);
  --bg-demo-screen-06--dark: url(../img/demo/screens/06-d.webp);
  --bg-demo-screen-07--dark: url(../img/demo/screens/07-d.webp);
  --bg-demo-screen-08--dark: url(../img/demo/screens/08-d.webp);
  --bg-demo-screen-09--dark: url(../img/demo/screens/09-d.webp);


  /* ==================================================
     PERMANENT COLORS
     Fixed brand tokens used across both schemes
  ================================================== */

  --pt-base: #FFFFFF;
  --pt-base-dark: #0D0D0D;

  --pt-t-light-bright: #FFFFFF;
  --pt-t-dark-bright: #0D0D0D;

  --pt-st-light-bright: #FFFFFF;
  --pt-st-dark-bright: #0D0D0D;

  --pt-blue-rgb: 0, 82, 255;
  --pt-blue-soft-rgb: 125, 162, 255;
  --pt-blue-dark-rgb: 0, 35, 120;


  /* ==================================================
     NEUTRAL COLORS
  ================================================== */

  --nl-white: #FFFFFF;
  --nl-black: #000000;


  /* ==================================================
     DEFAULT ACTIVE THEME
     Dark is DBETA's primary brand environment
  ================================================== */

  --base: var(--base--dark);
  --base-rgb: var(--base-rgb--dark);
  --base-tint: var(--base-tint--dark);
  --base-shade: var(--base-shade--dark);
  --base-opp: var(--base-opp--dark);
  --base-opp-tint: var(--base-opp-tint--dark);

  --accent: var(--accent--dark);
  --accent-text: var(--accent-text--dark);
  --accent-rgb: var(--accent-rgb--dark);

  --additional: var(--additional--dark);
  --additional-rgb: var(--additional-rgb--dark);

  --neutral-transparent: var(--neutral-transparent--dark);

  --st-bright: var(--st-bright--dark);
  --st-medium: var(--st-medium--dark);
  --st-muted: var(--st-muted--dark);
  --st-opp-bright: var(--st-opp-bright--dark);

  --fw-regular: var(--fw-regular--dark);
  --fw-medium: var(--fw-medium--dark);
  --fw-semibold: var(--fw-semibold--dark);
  --fw-bold: var(--fw-bold--dark);
  --fw-regular-opp: var(--fw-regular-opp--dark);
  --fw-medium-opp: var(--fw-medium-opp--dark);

  --t-bright: var(--t-bright--dark);
  --t-medium: var(--t-medium--dark);
  --t-muted: var(--t-muted--dark);
  --t-muted-extra: var(--t-muted-extra--dark);

  --t-opp-bright: var(--t-opp-bright--dark);
  --t-opp-medium: var(--t-opp-medium--dark);
  --t-opp-muted: var(--t-opp-muted--dark);

  --bg-demo-screen-01: var(--bg-demo-screen-01--dark);
  --bg-demo-screen-02: var(--bg-demo-screen-02--dark);
  --bg-demo-screen-03: var(--bg-demo-screen-03--dark);
  --bg-demo-screen-04: var(--bg-demo-screen-04--dark);
  --bg-demo-screen-05: var(--bg-demo-screen-05--dark);
  --bg-demo-screen-06: var(--bg-demo-screen-06--dark);
  --bg-demo-screen-07: var(--bg-demo-screen-07--dark);
  --bg-demo-screen-08: var(--bg-demo-screen-08--dark);
  --bg-demo-screen-09: var(--bg-demo-screen-09--dark);
}


/* ------------------------------------------------*/
/* OS Preference: Light */
/* Only applies when no manual data-theme is set */
/* ------------------------------------------------*/

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --base: var(--base--light);
    --base-rgb: var(--base-rgb--light);
    --base-tint: var(--base-tint--light);
    --base-shade: var(--base-shade--light);
    --base-opp: var(--base-opp--light);
    --base-opp-tint: var(--base-opp-tint--light);

    --accent: var(--accent--light);
    --accent-text: var(--accent-text--light);
    --accent-rgb: var(--accent-rgb--light);

    --additional: var(--additional--light);
    --additional-rgb: var(--additional-rgb--light);

    --neutral-transparent: var(--neutral-transparent--light);

    --st-bright: var(--st-bright--light);
    --st-medium: var(--st-medium--light);
    --st-muted: var(--st-muted--light);
    --st-opp-bright: var(--st-opp-bright--light);

    --fw-regular: var(--fw-regular--light);
    --fw-medium: var(--fw-medium--light);
    --fw-semibold: var(--fw-semibold--light);
    --fw-bold: var(--fw-bold--light);
    --fw-regular-opp: var(--fw-regular-opp--light);
    --fw-medium-opp: var(--fw-medium-opp--light);

    --t-bright: var(--t-bright--light);
    --t-medium: var(--t-medium--light);
    --t-muted: var(--t-muted--light);
    --t-muted-extra: var(--t-muted-extra--light);

    --t-opp-bright: var(--t-opp-bright--light);
    --t-opp-medium: var(--t-opp-medium--light);
    --t-opp-muted: var(--t-opp-muted--light);

    --bg-demo-screen-01: var(--bg-demo-screen-01--light);
    --bg-demo-screen-02: var(--bg-demo-screen-02--light);
    --bg-demo-screen-03: var(--bg-demo-screen-03--light);
    --bg-demo-screen-04: var(--bg-demo-screen-04--light);
    --bg-demo-screen-05: var(--bg-demo-screen-05--light);
    --bg-demo-screen-06: var(--bg-demo-screen-06--light);
    --bg-demo-screen-07: var(--bg-demo-screen-07--light);
    --bg-demo-screen-08: var(--bg-demo-screen-08--light);
    --bg-demo-screen-09: var(--bg-demo-screen-09--light);
  }
}


/* ------------------------------------------------*/
/* Manual Theme Override: Light */
/* Use: <html data-theme="light"> */
/* ------------------------------------------------*/

:root[data-theme="light"] {
  color-scheme: light;

  --base: var(--base--light);
  --base-rgb: var(--base-rgb--light);
  --base-tint: var(--base-tint--light);
  --base-shade: var(--base-shade--light);
  --base-opp: var(--base-opp--light);
  --base-opp-tint: var(--base-opp-tint--light);

  --accent: var(--accent--light);
  --accent-text: var(--accent-text--light);
  --accent-rgb: var(--accent-rgb--light);

  --additional: var(--additional--light);
  --additional-rgb: var(--additional-rgb--light);

  --neutral-transparent: var(--neutral-transparent--light);

  --st-bright: var(--st-bright--light);
  --st-medium: var(--st-medium--light);
  --st-muted: var(--st-muted--light);
  --st-opp-bright: var(--st-opp-bright--light);

  --fw-regular: var(--fw-regular--light);
  --fw-medium: var(--fw-medium--light);
  --fw-semibold: var(--fw-semibold--light);
  --fw-bold: var(--fw-bold--light);
  --fw-regular-opp: var(--fw-regular-opp--light);
  --fw-medium-opp: var(--fw-medium-opp--light);

  --t-bright: var(--t-bright--light);
  --t-medium: var(--t-medium--light);
  --t-muted: var(--t-muted--light);
  --t-muted-extra: var(--t-muted-extra--light);

  --t-opp-bright: var(--t-opp-bright--light);
  --t-opp-medium: var(--t-opp-medium--light);
  --t-opp-muted: var(--t-opp-muted--light);

  --bg-demo-screen-01: var(--bg-demo-screen-01--light);
  --bg-demo-screen-02: var(--bg-demo-screen-02--light);
  --bg-demo-screen-03: var(--bg-demo-screen-03--light);
  --bg-demo-screen-04: var(--bg-demo-screen-04--light);
  --bg-demo-screen-05: var(--bg-demo-screen-05--light);
  --bg-demo-screen-06: var(--bg-demo-screen-06--light);
  --bg-demo-screen-07: var(--bg-demo-screen-07--light);
  --bg-demo-screen-08: var(--bg-demo-screen-08--light);
  --bg-demo-screen-09: var(--bg-demo-screen-09--light);
}


/* ------------------------------------------------*/
/* Manual Theme Override: Dark */
/* Use: <html data-theme="dark"> */
/* ------------------------------------------------*/

:root[data-theme="dark"] {
  color-scheme: dark;

  --base: var(--base--dark);
  --base-rgb: var(--base-rgb--dark);
  --base-tint: var(--base-tint--dark);
  --base-shade: var(--base-shade--dark);
  --base-opp: var(--base-opp--dark);
  --base-opp-tint: var(--base-opp-tint--dark);

  --accent: var(--accent--dark);
  --accent-text: var(--accent-text--dark);
  --accent-rgb: var(--accent-rgb--dark);

  --additional: var(--additional--dark);
  --additional-rgb: var(--additional-rgb--dark);

  --neutral-transparent: var(--neutral-transparent--dark);

  --st-bright: var(--st-bright--dark);
  --st-medium: var(--st-medium--dark);
  --st-muted: var(--st-muted--dark);
  --st-opp-bright: var(--st-opp-bright--dark);

  --fw-regular: var(--fw-regular--dark);
  --fw-medium: var(--fw-medium--dark);
  --fw-semibold: var(--fw-semibold--dark);
  --fw-bold: var(--fw-bold--dark);
  --fw-regular-opp: var(--fw-regular-opp--dark);
  --fw-medium-opp: var(--fw-medium-opp--dark);

  --t-bright: var(--t-bright--dark);
  --t-medium: var(--t-medium--dark);
  --t-muted: var(--t-muted--dark);
  --t-muted-extra: var(--t-muted-extra--dark);

  --t-opp-bright: var(--t-opp-bright--dark);
  --t-opp-medium: var(--t-opp-medium--dark);
  --t-opp-muted: var(--t-opp-muted--dark);

  --bg-demo-screen-01: var(--bg-demo-screen-01--dark);
  --bg-demo-screen-02: var(--bg-demo-screen-02--dark);
  --bg-demo-screen-03: var(--bg-demo-screen-03--dark);
  --bg-demo-screen-04: var(--bg-demo-screen-04--dark);
  --bg-demo-screen-05: var(--bg-demo-screen-05--dark);
  --bg-demo-screen-06: var(--bg-demo-screen-06--dark);
  --bg-demo-screen-07: var(--bg-demo-screen-07--dark);
  --bg-demo-screen-08: var(--bg-demo-screen-08--dark);
  --bg-demo-screen-09: var(--bg-demo-screen-09--dark);
}


/* ------------------------------------------------*/
/* Responsive Radius Tokens */
/* ------------------------------------------------*/

@media only screen and (min-width: 768px) {
  :root {
    --_radius-m: 2.6rem;
    --_radius-l: 5rem;
    --_radius-xl: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  :root {
    --_radius-xl: 8rem;
  }
}

/* ------------------------------------------------*/
/* Variables End */
/* ------------------------------------------------*/