/*
  ProductLog design tokens.
  Rules, sources and reasons: docs/design.md. Live preview: /styleguide.
  Names follow the HIG meaning (label, separator, ...), not the color value.
  Use only these tokens in other CSS files. Do not write raw colors there.
*/

:root {
  color-scheme: light dark;

  /* ---- Color: light ---- */
  --bg: #F2F2F7;             /* page (systemGroupedBackground) */
  --bg-secondary: #FFFFFF;   /* cards, fields, grouped content */
  --bg-tertiary: #F2F2F7;    /* content inside a card */
  --bg-elevated: #FFFFFF;    /* dialogs, floating layers */

  --label: #000000;
  --label-secondary: #6C6C70;
  --label-tertiary: #8A8A8E;  /* disabled or decorative only, never needed text */

  --separator: #C6C6C8;
  --control-border: #8E8E93;
  --fill-pressed: rgba(60, 60, 67, 0.10);
  --fill: #E3E3E8;            /* track of a segmented control */
  --fill-selected: #FFFFFF;   /* selected segment */

  --accent: #0071E3;          /* filled controls */
  --on-accent: #FFFFFF;
  --link: #0066CC;            /* accent used as text */
  --accent-tint: #E6F1FC;

  --info: #0066CC;
  --info-bg: #E6F1FC;
  --success: #1E7B34;
  --success-bg: #E7F5EA;
  --warning: #B35900;
  --warning-bg: #FFF1E0;
  --error: #D70015;
  --error-bg: #FDE8EA;

  --shadow-dialog: 0 10px 40px rgba(0, 0, 0, 0.20);
  --scrim: rgba(0, 0, 0, 0.40);

  /* ---- Typography: HIG iOS text styles (size / leading), in rem ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-large-title: 2.125rem;  --lh-large-title: 2.5625rem;  /* 34 / 41 */
  --fs-title-1: 1.75rem;       --lh-title-1: 2.125rem;       /* 28 / 34 */
  --fs-title-2: 1.375rem;      --lh-title-2: 1.75rem;        /* 22 / 28 */
  --fs-title-3: 1.25rem;       --lh-title-3: 1.5625rem;      /* 20 / 25 */
  --fs-headline: 1.0625rem;    --lh-headline: 1.375rem;      /* 17 / 22 */
  --fs-body: 1.0625rem;        --lh-body: 1.375rem;          /* 17 / 22 */
  --fs-callout: 1rem;          --lh-callout: 1.3125rem;      /* 16 / 21 */
  --fs-subhead: 0.9375rem;     --lh-subhead: 1.25rem;        /* 15 / 20 */
  --fs-footnote: 0.8125rem;    --lh-footnote: 1.125rem;      /* 13 / 18 */
  --fs-caption-1: 0.75rem;     --lh-caption-1: 1rem;         /* 12 / 16 */
  --fs-caption-2: 0.6875rem;   --lh-caption-2: 0.8125rem;    /* 11 / 13 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing: 4px base ---- */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */

  /* ---- Sizes ---- */
  --hit: 2.75rem;         /* 44: smallest allowed touch target */
  --control-h: 3.125rem;  /* 50: buttons and fields */
  --row-h: 3.25rem;       /* 52: list rows */
  --tabbar-h: 3.5rem;     /* 56: bottom tab bar, before the safe area */
  --sidebar-w: 16rem;
  --content-w: 44rem;     /* readable width for text and forms */
  --wide-w: 64rem;        /* tables and dashboards */

  /* ---- Shape ---- */
  --radius-sm: 0.5rem;    /*  8: small chips */
  --radius-md: 0.75rem;   /* 12: buttons, fields, cards */
  --radius-lg: 1rem;      /* 16: dialogs */
  --radius-full: 999px;

  /* ---- Motion ---- */
  --duration: 150ms;
  --ease: ease-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;
    --bg-elevated: #2C2C2E;   /* depth in dark mode = brighter surface, not shadow */

    --label: #FFFFFF;
    --label-secondary: #A1A1A6;
    --label-tertiary: #6E6E73;

    --separator: #38383A;
    --control-border: #8E8E93;
    --fill-pressed: rgba(235, 235, 245, 0.12);
    --fill: #1C1C1E;
    --fill-selected: #48484A;

    --accent: #0A66D6;
    --on-accent: #FFFFFF;
    --link: #4DA3FF;
    --accent-tint: #12304F;

    --info: #4DA3FF;
    --info-bg: #12304F;
    --success: #30D158;
    --success-bg: #12301B;
    --warning: #FF9F0A;
    --warning-bg: #3A2610;
    --error: #FF6B62;
    --error-bg: #3F1519;

    --shadow-dialog: 0 10px 40px rgba(0, 0, 0, 0.60);
    --scrim: rgba(0, 0, 0, 0.60);
  }
}

/* Increase Contrast setting */
@media (prefers-contrast: more) {
  :root {
    --label-secondary: #3C3C43;
    --separator: #6C6C70;
    --control-border: #48484A;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --label-secondary: #D1D1D6;
    --separator: #8E8E93;
    --control-border: #AEAEB2;
  }
}