/* Design tokens (light default, dark opt-in via <html data-theme="dark">). Brand overrides at the end of this file. */

:root {
  color-scheme: light;

  /* ---- Brand / accent ---- */
  --color-accent: #0074e2;
  --color-on-accent: #fff;
  --color-accent-soft: #c4ddfb;        /* --color-background-blue */
  --color-border-accent: #b1c9e7;      /* --color-border-blue */

  /* ---- Text ---- */
  --color-text-primary: #171717;
  --color-text-secondary: #737373;
  --color-text-disabled: #a3a3a3;
  --color-text-blue: #00458c;          /* links */
  --color-text-green: #0c5700;
  --color-text-red: #89001a;
  --color-text-yellow: #584400;

  /* ---- Surfaces ---- */
  --color-background-body: #f5f5f5;
  --color-background-muted: #f1f1f1;
  --color-background-surface: #fff;
  --color-background-card: #fff;
  --color-background-popover: #fff;
  --color-background-gray: #e5e5e5;

  /* ---- Borders / overlays ---- */
  --color-border: #ebebeb;
  --color-border-emphasized: #d4d4d4;
  --color-logo-outline: transparent;    /* logo body outline; only visible in dark mode */
  --color-neutral: #0000000f;
  --color-overlay-hover: #0000000d;
  --color-overlay-pressed: #0000001a;
  --color-overlay: #00000080;
  --color-skeleton: #ebebeb;

  /* ---- Status ---- */
  --color-success: #198100;
  --color-on-success: #fff;
  --color-success-muted: #c5e5c0;
  --color-border-green: #b2d1ac;
  --color-warning: #ffce2f;
  --color-on-warning: #171717;
  --color-warning-text: #745b00;
  --color-warning-muted: #f8da9d;
  --color-border-yellow: #e4c279;
  --color-error: #e33f4a;
  --color-on-error: #fff;
  --color-error-solid: #a50c25;
  --color-error-muted: #facecb;
  --color-border-red: #e6bab8;
  --color-purple-muted: #eccef3;       /* --color-background-purple */
  --color-text-purple: #700084;        /* */
  --color-border-purple: #d8bbdf;      /* */

  /* ---- Typography ---- */
  /* Google Sans first, then their system stack. Thai fallbacks appended
     (Google Sans ships a Thai subset; the rest only matter if the web font is blocked). */
  --font-family-body: "Google Sans", -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue",
    "Adwaita Sans", Cantarell, Ubuntu, Roboto, Noto, "Noto Sans Thai", "Sukhumvit Set", Thonburi, Tahoma, Helvetica, Arial, sans-serif;
  --font-family-heading: var(--font-family-body);
  --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* */

  /* size scale (rem) */
  --font-size-3xs: 0.5rem;
  --font-size-2xs: 0.5625rem;
  --font-size-xs: 0.6875rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1875rem;
  --font-size-xl: 1.4375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.0625rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* text styles: size / weight / line-height */
  --text-body-size: var(--font-size-base);
  --text-body-weight: var(--font-weight-normal);
  --text-body-leading: 1.5;
  --text-supporting-size: 0.875rem;
  --text-supporting-weight: var(--font-weight-normal);
  --text-supporting-leading: 1.5385;
  --text-label-size: var(--font-size-base);
  --text-label-weight: var(--font-weight-medium);
  --text-label-leading: 1.5;
  --text-large-size: var(--font-size-lg);
  --text-large-weight: var(--font-weight-semibold);
  --text-large-leading: 1.4737;
  --text-heading-1-size: var(--font-size-2xl);
  --text-heading-1-weight: var(--font-weight-semibold);
  --text-heading-1-leading: 1.4286;
  --text-heading-2-size: var(--font-size-xl);
  --text-heading-2-weight: var(--font-weight-semibold);
  --text-heading-2-leading: 1.3913;
  --text-heading-3-size: var(--font-size-lg);
  --text-heading-3-weight: var(--font-weight-semibold);
  --text-heading-3-leading: 1.4737;
  --text-heading-4-size: var(--font-size-base);
  --text-heading-4-weight: var(--font-weight-semibold);
  --text-heading-4-leading: 1.5;
  --text-heading-5-size: var(--font-size-sm);
  --text-heading-5-weight: var(--font-weight-semibold);
  --text-heading-5-leading: 1.5385;
  --text-display-3-size: var(--font-size-3xl);
  --text-display-3-weight: var(--font-weight-normal);
  --text-display-3-leading: 1.2121;
  --text-code-size: 0.875rem;          /* base uses 1rem; denser for file viewers */
  --text-code-leading: 1.5;            /* */

  /* ---- Spacing ---- */
  --spacing-0: 0px;
  --spacing-0-5: 2px;
  --spacing-1: 6px;
  --spacing-1-5: 8px;
  --spacing-2: 12px;
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 28px;
  --spacing-6: 32px;
  --spacing-7: 42px;
  --spacing-8: 48px;
  --spacing-9: 54px;
  --spacing-10: 60px;
  --spacing-11: 64px;
  --spacing-12: 72px;

  /* ---- Radii ---- */
  --radius-none: 0px;
  --radius-inner: 6px;
  --radius-element: 12px;
  --radius-container: 16px;
  --radius-panel: 20px;
  --radius-chat: 24px;
  --radius-page: 42px;
  --radius-full: 9999px;

  /* ---- Control sizes ---- */
  --size-element-xs: 28px;
  --size-element-sm: 36px;
  --size-element-md: 40px;
  --size-element-lg: 48px;
  --size-element-xl: 56px;
  --border-width: 1px;
  --tap-target: 44px;                  /* minimum touch target on phones (Apple HIG, WCAG 2.5.5) */
  --table-cell-max: 32ch;              /* widest a markdown table column grows before wrapping */
  --device-icon-size: 44px;            /* device card icon tile */

  /* ---- Shadows ---- */
  --shadow-low: 0 2px 4px oklch(0% 0 0 / 0.05), 0 4px 8px oklch(0% 0 0 / 0.1), inset 0 0 0 1px transparent;
  --shadow-med: 0 2px 4px oklch(0% 0 0 / 0.05), 0 4px 12px oklch(0% 0 0 / 0.1), inset 0 0 0 1px transparent;
  --shadow-high: 0 4px 6px oklch(0% 0 0 / 0.1), 0 12px 24px oklch(0% 0 0 / 0.15), inset 0 0 0 1px transparent;
  --shadow-inset-hover: inset 0 0 0 2px color-mix(in srgb, var(--color-border-emphasized) 30%, transparent);
  --shadow-inset-selected: inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 50%, transparent);
  --shadow-inset-error: inset 0 0 0 2px color-mix(in srgb, var(--color-error) 30%, transparent);
  --shadow-inset-success: inset 0 0 0 2px color-mix(in srgb, var(--color-success) 30%, transparent);

  /* ---- Motion ---- */
  --duration-fast: 0.125s;
  --duration-medium: 0.3s;
  --duration-slow: 0.7s;
  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);
  --popover-width: 288px;               /* account popover under the avatar */
  --duration-logo-loop: 6s;            /* header logo blink + glance cycle (mostly idle) */
  --logo-glance-distance: 110px;       /* pupil width in logo viewBox units: a glance moves it to the other half of the eye */
  --mascot-size: clamp(8.5rem, 32vw, 14rem); /* landing hero logo: 136px on a phone, 224px on desktop */

  /* ---- Layout ---- */
  --layout-top-nav-height: 4rem;       /* */
  --layout-content-max: 1120px;        /* (wide pages are too wide for reading docs) */
  --layout-reading-max: 780px;         /* */
  --layout-gutter: var(--spacing-4);   /* container padding = spacing-4 */

  /* ---- Component tokens (composed from the above, base component recipes) ---- */
  /* Button : pill radius, medium weight, padding-block spacing-2, 98% press scale, 2px focus ring offset 3px */
  --button-radius: var(--radius-full);
  --button-padding-inline: var(--spacing-3);
  --button-padding-block: var(--spacing-2);
  --button-weight: var(--font-weight-medium);
  --button-press-scale: 0.98;
  --button-disabled-opacity: 0.5;
  --focus-ring: 2px solid var(--color-accent);
  --focus-ring-offset: 3px;
  /* Input : 40px, 1px emphasized border, 12px radius, accent border + 50% inset ring on focus */
  --input-height: var(--size-element-md);
  --input-radius: var(--radius-element);
  --input-border: var(--border-width) solid var(--color-border-emphasized);
  --input-padding-inline: var(--spacing-2);
  /* Card : white, 1px #ebebeb border, container radius */
  --card-radius: var(--radius-container);
  --card-border: var(--border-width) solid var(--color-border);
  --card-padding: var(--spacing-3);
  /* Badge : pill, 12px/16px, medium weight, muted grey */
  --badge-radius: 999px;
  --badge-padding: 3px 10px;
  --badge-size: 12px;
  --badge-leading: 16px;
  --badge-bg: var(--color-background-muted);
  --badge-color: var(--color-text-secondary);
  /* Chip : 6% text-colour tint, 13px, pill */
  --chip-bg: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
  --chip-bg-hover: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
  --chip-padding: 7px 12px;
  --chip-size: 13px;
  --chip-weight: 650;

  /* ---- Landing / hero , composed only from the colours above ---- */
  --gradient-hero:
    radial-gradient(60% 55% at 88% 0%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 70%),
    radial-gradient(45% 40% at 0% 25%, color-mix(in srgb, var(--color-accent) 11%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--color-accent-soft) 40%, var(--color-background-surface)), var(--color-background-surface));
  --gradient-page: linear-gradient(color-mix(in srgb, var(--color-accent) 7%, var(--color-background-body)), var(--color-background-body) 340px);
  --gradient-brand: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 70%, var(--color-on-accent)), var(--color-accent) 55%);
  --shadow-glow: 0 16px 48px color-mix(in srgb, var(--color-accent) 22%, transparent);
  --header-blur: 14px;
  --text-hero-size: clamp(2.0625rem, 8.4vw, 3rem);   /* 3xl .. 5xl */
  --text-hero-leading: 1.12;
  /* terminal preview: always dark, built from the dark palette */
  --terminal-bg: #171717;
  --terminal-fg: #ebebeb;
  --terminal-dim: #a3a3a3;
  --terminal-ok: #9fe59b;
  --terminal-accent: #6d9cfe;
}

/* Dark theme: light-dark() pairs. Opt-in via <html data-theme="dark"> (toggle in the header, saved in localStorage). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-accent: #6d9cfe;
    --color-on-accent: #171717;
    --color-accent-soft: #9eb7ff3d;
    --color-border-accent: #6d9cfe;
    --color-text-primary: #fafafa;
    --color-text-secondary: #a3a3a3;
    --color-text-disabled: #525252;
    --color-text-blue: #c7d3ff;
    --color-text-green: #9fe59b;
    --color-text-red: #ffc6c1;
    --color-text-yellow: #fdcf4f;
    --color-background-body: #1b1b1b;
    --color-background-muted: #1b1b1b;
    --color-background-surface: #262626;
    --color-background-card: #262626;
    --color-background-popover: #1b1b1b;
    --color-background-gray: #54545433;
    --color-border: #ffffff1a;
    --color-border-emphasized: #525252;
    --color-logo-outline: rgba(255, 255, 255, 0.28); /* black logo body vs #262626 surface */
    --color-neutral: #ffffff1a;
    --color-overlay-hover: #ffffff0d;
    --color-overlay-pressed: #ffffff1a;
    --color-overlay: #000c;
    --color-skeleton: #525252;
    --color-success: #64af4c;
    --color-on-success: #171717;
    --color-success-muted: #84c9803d;
    --color-border-green: #69ad67;
    --color-warning-text: #fdcf4f;
    --color-warning-muted: #deb4333d;
    --color-border-yellow: #c0990e;
    --color-error: #ff705d;
    --color-on-error: #171717;
    --color-error-muted: #ff9e973d;
    --color-border-red: #ff6f6c;
    --color-purple-muted: #f297ff3d;
    --color-text-purple: #fac1ff;
    --color-border-purple: #dd74f0;
    --shadow-low: 0 2px 4px oklch(0% 0 0 / 0.25), 0 4px 8px oklch(0% 0 0 / 0.4), inset 0 0 0 1px oklch(100% 0 0 / 0.08);
    --shadow-med: 0 2px 4px oklch(0% 0 0 / 0.35), 0 4px 12px oklch(0% 0 0 / 0.5), inset 0 0 0 1px oklch(100% 0 0 / 0.12);
    --shadow-high: 0 4px 6px oklch(0% 0 0 / 0.5), 0 12px 24px oklch(0% 0 0 / 0.7), inset 0 0 0 1px oklch(100% 0 0 / 0.15);
}

/* phones: every button and input is at least a 44px tap target */
@media (max-width: 719px) {
  :root { --size-element-xs: var(--tap-target); --size-element-sm: var(--tap-target); --size-element-md: var(--tap-target); }
}

/* ---- Brand: IE Coder orange (sampled from the IE Coder page logo) replaces the base blue accent ----
   Contrast: #171717 on #ee4e02 = 4.9:1 (button labels); #b33a00 on white = 6:1 (accent text/links);
   #ee4e02 on white = 3.7:1 (large text and UI only). */
:root {
  --color-accent: #ee4e02;
  --color-accent-hover: #d84602;
  --color-accent-pressed: #c03e02;
  --color-on-accent: #171717;
  --color-accent-soft: #fde3d3;
  --color-border-accent: #f9b48f;
  --color-text-blue: #b33a00;
  --color-brand-cream: #fceadc;
  --terminal-accent: #ee4e02;
  --player-frame: #0b0b0b;
}
:root[data-theme="dark"] {
  --color-accent: #ee4e02;
  --color-accent-hover: #ff5e12;
  --color-accent-pressed: #d84602;
  --color-on-accent: #171717;
  --color-accent-soft: #ee4e023d;
  --color-border-accent: #ee4e02;
  --color-text-blue: #fceadc;
}