/*
 * KeepMySkills design tokens.
 *
 * SOURCE: values marked [fw] were extracted from fastwork.com's published
 * stylesheets (fetched 2026-10-23: /_app/immutable/assets/*.css, the :root
 * custom properties and the .sb-button / .sb-input-surface / .badge / .card /
 * .chip / .sb-banner rules). Only visual tokens are used; no logo, name,
 * illustration, image, copy or font file is copied.
 * Values marked [kms] are our own (or a documented adaptation).
 *
 * Every colour, size, radius and shadow in styles.css comes from this file.
 * Light is the default everywhere (bright, like Fastwork). Dark uses Fastwork's dark pairs and is chosen with the
 * header toggle (<html data-theme="dark">, remembered in localStorage by theme.js before first paint).
 */

:root {
  color-scheme: light;

  /* ---- Brand / accent [fw: --color-fastwork, --color-accent] ---- */
  --color-accent: #0074e2;
  --color-on-accent: #fff;
  --color-accent-soft: #c4ddfb;        /* [fw] --color-background-blue */
  --color-border-accent: #b1c9e7;      /* [fw] --color-border-blue */

  /* ---- Text [fw] ---- */
  --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 [fw] ---- */
  --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 [fw] ---- */
  --color-border: #ebebeb;
  --color-border-emphasized: #d4d4d4;
  --color-neutral: #0000000f;
  --color-overlay-hover: #0000000d;
  --color-overlay-pressed: #0000001a;
  --color-overlay: #00000080;
  --color-skeleton: #ebebeb;

  /* ---- Status [fw] ---- */
  --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;

  /* ---- Typography ---- */
  /* [fw] Google Sans first, then their system stack. [kms] 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; /* [fw] */

  /* [fw] 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;

  /* [fw] 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;          /* [kms] Fastwork uses 1rem; denser for file viewers */
  --text-code-leading: 1.5;            /* [fw] */

  /* ---- Spacing [fw: --spacing-N] ---- */
  --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 [fw] ---- */
  --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 [fw: --size-element-*] ---- */
  --size-element-xs: 28px;
  --size-element-sm: 36px;
  --size-element-md: 40px;
  --size-element-lg: 48px;
  --size-element-xl: 56px;
  --border-width: 1px;

  /* ---- Shadows [fw: --shadow-low/med/high, --shadow-inset-*] ---- */
  --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 [fw] ---- */
  --duration-fast: 0.125s;
  --duration-medium: 0.3s;
  --duration-slow: 0.7s;
  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);

  /* ---- Layout ---- */
  --layout-top-nav-height: 4rem;       /* [fw] --fw-top-nav-height */
  --layout-content-max: 1120px;        /* [kms] (Fastwork page max is 1580px: too wide for reading docs) */
  --layout-reading-max: 780px;         /* [kms] */
  --layout-gutter: var(--spacing-4);   /* [fw] container padding = spacing-4 */

  /* ---- Component tokens (composed from the above, mirroring Fastwork's components) ---- */
  /* Button [fw .sb-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 [fw .sb-input-surface]: 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 [fw .card.is-article]: 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 [fw .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 [fw .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 [kms], 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);   /* [fw] 3xl .. 5xl */
  --text-hero-leading: 1.12;
  /* terminal preview: always dark, built from Fastwork's dark palette */
  --terminal-bg: #171717;
  --terminal-fg: #ebebeb;
  --terminal-dim: #a3a3a3;
  --terminal-ok: #9fe59b;
  --terminal-accent: #6d9cfe;
}

/* Dark theme: [fw] 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-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;
    --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);
}