/*
 * SisuDent design tokens — master file
 * Location: Claude_Workspace/design/tokens/tokens.css (master; the theme copy is byte-identical, File_Organization.md 3, Rule 3)
 * Approved at Mandatory Gate 2 (Decision_Log D-024); core colours D-022.
 * Sources: Design_System_Plan.md 3.3, 4.4, 5, 6, 8.1; Blueprint 2, 3, 4, 8.
 *
 * Two layers:
 *   1. Core tokens     — raw values (colour, type scale, space, shape, motion)
 *   2. Semantic tokens — roles; components use semantic tokens only
 *
 * Responsive system (Session 3.3; Blueprint 4.4, 15.9–15.10; Responsive_Foundation.md).
 * Breakpoints cannot be custom properties inside media queries; they are documented here and written as literals.
 * Layout tiers (grid tokens change here, mobile first, min-width):
 *   mobile  < 640px      4 columns · gutter 16 · margin 20
 *   tablet  640–1023px   8 columns · gutter 24 · margin 32
 *   desktop ≥ 1024px    12 columns · gutter 32 · margin 48
 * Component breakpoint (no grid change):
 *   wide    ≥ 1280px     full navigation, utility bar, search panel, five-column product grid, one-row footer links
 * Phone refinements (header and dense rows only, max-width):
 *   < 480px  logo 36px, account link moves into the drawer
 *   < 400px  persistent action becomes a full-width strip below the bar; service list icon narrower
 * Query forms: min-width 640px / 1024px / 1280px; max-width 639.98px / 1023.98px / 1279.98px / 479.98px / 399.98px.
 * No other breakpoints. Below a tier, components adapt intrinsically (auto-fill grids, clamp(), wrapping, container queries).
 */

:root {
  /* ------------------------------------------------------------------
   * 1. Core tokens
   * ------------------------------------------------------------------ */

  /* Colour — brand (fixed, D-022) */
  --sd-color-brand-blue: #002F6C;
  --sd-color-white: #FFFFFF;
  --sd-color-gray-100: #F4F6F8;
  --sd-color-gray-300: #D9DEE3;
  --sd-color-gray-600: #5F6B76;
  --sd-color-text: #1F2933;
  --sd-color-accent-copper: #B87333;
  --sd-color-accent-copper-text: #9A5B22;

  /* Colour — derived variants (Blueprint 3.11–3.12; approved D-024) */
  --sd-color-blue-hover: #002656;   /* blue + 20 % black */
  --sd-color-blue-active: #001F46;  /* blue + 35 % black */
  --sd-color-blue-700: #406391;     /* blue + 75 % white; diagram lines, non-text */
  --sd-color-blue-100: #D9E0E9;     /* blue + 85 % white */
  --sd-color-blue-050: #EBEEF3;     /* blue + 92 % white */
  --sd-color-gray-500: #7F8991;     /* gray-600 + 20 % white; identifiable UI boundaries (≥ 3 : 1) */
  --sd-color-gray-400: #A7AEB4;     /* gray-600 + 45 % white; disabled text only */
  --sd-color-copper-050: #F7F2ED;   /* copper tint; warning background */

  /* Colour — functional state colours (approved D-024, Blueprint 3.11; status messages only) */
  --sd-color-error: #A8322D;
  --sd-color-error-050: #F8EFEE;
  --sd-color-success: #2F6B4F;
  --sd-color-success-050: #EEF3F1;

  /* Typography — family (approved: Schibsted Grotesk, D-024) */
  --sd-font-family-schibsted: "Schibsted Grotesk", "Schibsted Grotesk Fallback", system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  /* Typography — weights (Blueprint 2.9: no heavy Bold) */
  --sd-font-weight-regular: 400;
  --sd-font-weight-medium: 500;
  --sd-font-weight-semibold: 600;

  /* Typography — fluid scale, 375px → 1280px viewport (Design_System_Plan.md 4.4) */
  --sd-font-size-h1: clamp(2.5rem, 1.7749rem + 3.0939vw, 4.25rem);         /* 40 → 68 */
  --sd-font-size-h2: clamp(2rem, 1.6374rem + 1.547vw, 2.875rem);            /* 32 → 46 */
  --sd-font-size-h3: clamp(1.5625rem, 1.3812rem + 0.7735vw, 2rem);          /* 25 → 32 */
  --sd-font-size-h4: clamp(1.3125rem, 1.2348rem + 0.3315vw, 1.5rem);        /* 21 → 24 */
  --sd-font-size-body-lg: clamp(1.125rem, 1.0732rem + 0.221vw, 1.25rem);    /* 18 → 20 */
  --sd-font-size-body: clamp(1rem, 0.9482rem + 0.221vw, 1.125rem);          /* 16 → 18 */
  --sd-font-size-small: clamp(0.875rem, 0.8491rem + 0.1105vw, 0.9375rem);   /* 14 → 15 */
  --sd-font-size-label: clamp(0.8125rem, 0.7866rem + 0.1105vw, 0.875rem);   /* 13 → 14 */
  --sd-font-size-eyebrow: 1.125rem;                                          /* 18 — orange eyebrow label sd-label (owner, D-032) */
  --sd-font-size-ui: clamp(0.9375rem, 0.9116rem + 0.1105vw, 1rem);          /* 15 → 16 */

  --sd-line-height-h1: 1.1;
  --sd-line-height-h2: 1.15;
  --sd-line-height-h3: 1.2;
  --sd-line-height-h4: 1.3;
  --sd-line-height-body: 1.6;
  --sd-line-height-article: 1.7;
  --sd-line-height-small: 1.5;
  --sd-line-height-label: 1.4;
  --sd-line-height-ui: 1.25;

  --sd-letter-spacing-heading: -0.015em;
  --sd-letter-spacing-label: 0.08em;
  --sd-letter-spacing-ui: 0.01em;

  --sd-measure-text: 68ch;    /* body text */
  --sd-measure-article: 70ch; /* articles 65–72ch (Blueprint 2.17) */

  /* Space — 8px system (Blueprint 4.7) */
  --sd-space-1: 0.25rem;  /*   4 — fine adjustments only */
  --sd-space-2: 0.5rem;   /*   8 */
  --sd-space-3: 1rem;     /*  16 */
  --sd-space-4: 1.5rem;   /*  24 */
  --sd-space-5: 2rem;     /*  32 */
  --sd-space-6: 3rem;     /*  48 */
  --sd-space-7: 4rem;     /*  64 */
  --sd-space-8: 6rem;     /*  96 */
  --sd-space-9: 8rem;     /* 128 */
  --sd-space-10: 10rem;   /* 160 */

  --sd-section-space: clamp(3rem, 2.1713rem + 3.5359vw, 5rem);       /* 48 → 80 per side = 96 → 160 between sections (Blueprint 4.8; reduced on owner request, D-034) */
  --sd-subsection-space: clamp(2.5rem, 1.9475rem + 2.3573vw, 3.75rem); /* 40 → 60 (D-034) */

  /* Layout — grid and content width (Blueprint 4.3–4.5) */
  --sd-container-max: 80rem;     /* 1280 */
  --sd-container-text: 47.5rem;  /* 760 reading container */
  --sd-grid-columns: 4;
  --sd-grid-gutter: 1rem;        /* 16 */
  --sd-page-margin: 1.25rem;     /* 20 */
  --sd-header-height: 4.5rem;    /* 72 */
  --sd-scroll-offset: 5.5rem;    /* 88 — sticky header (compact 65px) + 16px: anchor and focus targets stay visible */

  /* Shape and depth */
  --sd-radius-sm: 2px;
  --sd-radius-md: 4px;
  --sd-radius-lg: 8px;
  --sd-border-width: 1px;
  --sd-border-width-strong: 2px;
  --sd-shadow-overlay: 0 8px 24px rgb(31 41 51 / 0.12);

  /* Interaction size (Blueprint 15.27) */
  --sd-target-min: 2.75rem;      /* 44 */
  --sd-target-gap: 0.5rem;       /* 8 */

  /* Motion (Blueprint 8; no bounce or overshoot) */
  --sd-duration-quick: 150ms;
  --sd-duration-base: 250ms;
  --sd-duration-calm: 450ms;
  --sd-duration-deliberate: 800ms;
  --sd-duration-line: 1800ms;
  --sd-pause: 400ms;
  --sd-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sd-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sd-ease-line: cubic-bezier(0.45, 0, 0.25, 1);

  /* ------------------------------------------------------------------
   * 2. Semantic tokens (components use these)
   * ------------------------------------------------------------------ */

  /* Typography roles */
  --sd-font-family-base: var(--sd-font-family-schibsted);

  /* Surfaces */
  --sd-color-surface: var(--sd-color-white);
  --sd-color-surface-subtle: var(--sd-color-gray-100);
  --sd-color-surface-brand: var(--sd-color-brand-blue);
  --sd-color-surface-selected: var(--sd-color-blue-050);
  --sd-color-surface-disabled: var(--sd-color-gray-100);

  /* Text */
  --sd-color-text-default: var(--sd-color-text);
  --sd-color-text-muted: var(--sd-color-gray-600);          /* never on blue */
  --sd-color-text-heading: var(--sd-color-brand-blue);
  --sd-color-text-on-brand: var(--sd-color-white);
  --sd-color-text-accent: var(--sd-color-accent-copper-text);
  --sd-color-text-disabled: var(--sd-color-gray-400);
  --sd-color-link: var(--sd-color-brand-blue);
  --sd-color-link-hover: var(--sd-color-blue-hover);

  /* Borders */
  --sd-color-border-subtle: var(--sd-color-gray-300);       /* decorative dividers, never the only boundary of a control */
  --sd-color-border-control: var(--sd-color-gray-500);      /* form fields, controls */
  --sd-color-border-strong: var(--sd-color-brand-blue);
  --sd-color-border-selected: var(--sd-color-accent-copper);

  /* Actions */
  --sd-color-action-primary: var(--sd-color-brand-blue);
  --sd-color-action-primary-hover: var(--sd-color-blue-hover);
  --sd-color-action-primary-active: var(--sd-color-blue-active);
  --sd-color-action-primary-text: var(--sd-color-white);
  --sd-color-action-secondary-hover-bg: var(--sd-color-blue-050);
  --sd-color-action-secondary-active-bg: var(--sd-color-blue-100);

  /* Cards (owner change requests at Gate 2: light blue surface, brand blue border) */
  --sd-color-card-bg: var(--sd-color-blue-050);
  --sd-color-card-border: var(--sd-color-brand-blue);
  --sd-color-card-divider: var(--sd-color-blue-100);         /* lines inside a card */
  --sd-color-card-index: var(--sd-color-gray-600);          /* 4.69 : 1 on blue-050 */
  --sd-color-card-action: var(--sd-color-accent-copper-text); /* 4.64 : 1 on blue-050 */

  /* Focus (copper ring; 3.79 : 1 on white, 3.41 : 1 on blue) */
  --sd-focus-ring-color: var(--sd-color-accent-copper);
  --sd-focus-ring-width: var(--sd-border-width-strong);
  --sd-focus-ring-offset: 2px;

  /* States (colour + icon + text, never colour alone — Blueprint 3.13) */
  --sd-color-info: var(--sd-color-brand-blue);
  --sd-color-info-bg: var(--sd-color-blue-050);
  --sd-color-warning: var(--sd-color-accent-copper-text);
  --sd-color-warning-bg: var(--sd-color-copper-050);
  --sd-color-error-text: var(--sd-color-error);
  --sd-color-error-bg: var(--sd-color-error-050);
  --sd-color-success-text: var(--sd-color-success);
  --sd-color-success-bg: var(--sd-color-success-050);

  /* System visualization (Blueprint 6.12) */
  --sd-color-line-primary: var(--sd-color-brand-blue);      /* Blue Line, primary paths */
  --sd-color-line-secondary: var(--sd-color-blue-700);
  --sd-color-line-boundary: var(--sd-color-gray-300);
  --sd-color-line-emphasis: var(--sd-color-accent-copper);  /* one emphasised point only */
  --sd-line-width: 2px;
  --sd-line-width-secondary: 1px;

  /* Motion roles */
  --sd-transition-feedback: var(--sd-duration-quick) var(--sd-ease-standard);
  --sd-transition-ui: var(--sd-duration-base) var(--sd-ease-standard);
  --sd-transition-reveal: var(--sd-duration-calm) var(--sd-ease-out);
}

@media (min-width: 640px) {
  :root {
    --sd-grid-columns: 8;
    --sd-grid-gutter: 1.5rem;  /* 24 */
    --sd-page-margin: 2rem;    /* 32 */
  }
}

@media (min-width: 1024px) {
  :root {
    --sd-grid-columns: 12;
    --sd-grid-gutter: 2rem;    /* 32 */
    --sd-page-margin: 3rem;    /* 48 */
    --sd-header-height: 5rem;  /* 80 */
  }
}

/* Blue Line on mobile: 1.5px (Design_System_Plan.md 8.2) */
@media (max-width: 639.98px) {
  :root {
    --sd-line-width: 1.5px;
  }
}

/* Very small phones: the header carries the action strip (116px, header.css) */
@media (max-width: 399.98px) {
  :root {
    --sd-scroll-offset: 8.25rem;  /* 132 */
  }
}