/* ==========================================================================
   Pars Polymer Khavaran — design tokens
   Source: the approved HP-100 datasheet design (2026-10-28), recorded in .ux-profile.md.
   Three layers: primitive (raw values) → semantic (purpose) → component.
   Components use only semantic or component tokens, never primitives or raw hex.
   Contrast ratios in comments are WCAG 2.1, measured against white (#FFF)
   and canvas (#F2F4F6).
   ========================================================================== */

/* === 1. PRIMITIVES ====================================================== */
:root {
  /* Navy: header, footer, table heads */
  --navy-900: #073557;            /* brand: bars, table rules, buttons — 12.3 on white */
  --navy-800: #04223A;            /* brand hover / dark */
  --navy-700: #334155;            /* body text — 10.4 on white */

  /* Drum blue: primary actions, links */
  --blue-800: #04223A;            /* hover / pressed */
  --blue-700: #073557;            /* actions, links — same as brand in this design */
  --blue-100: #CFDFEC;
  --blue-50:  #E7EFF6;            /* soft accent: tiles, pills, hover */

  /* Amber: quote CTA only (+ focus ring) */
  --amber-500: #E8A21E;           /* 2.2 on white: fill only, never text on white */
  --amber-600: #C88A14;           /* CTA hover */
  --amber-700: #B07408;           /* 3.9 on white, 3.6 on canvas: focus ring on light surfaces */

  /* Neutrals */
  --white:     #FFFFFF;
  --gray-50:   #F8FAFC;           /* canvas */
  --gray-100:  #E6E8EA;           /* hairline row dividers */
  --gray-200:  #E6E8EA;           /* surface border */
  --gray-400:  #7B8794;           /* 3.6 on white: input borders, UI edges */
  --gray-600:  #475569;           /* 7.6 on white: muted / caption text */
  --gray-on-navy: #CBD5E1;        /* 9.0 on brand: secondary text on dark */
  --ink:       #0F172A;           /* strongest text */
  --focus-on-dark: #7FB8E6;      /* focus ring on brand bars */

  /* Application markers: exact pinwheel colours sampled from the logo
     (uploads/2024/09/Asset-6@4xeng.png). Each blade has a light and a dark shade.
     A marker is always shown next to its text label, so it is never the only
     carrier of meaning. Three are below 3:1 on white and must stay decorative. */
  --app-carpet:      #C1001F;     /* فرش — red light, 6.4 */
  --app-textile:     #C1004F;     /* نساجی — magenta light, 6.2 */
  --app-wood:        #916431;     /* چوب — brown light, 5.2 */
  --app-packaging:   #C9521E;     /* بسته‌بندی — orange (amber blade, dark), 4.5 */
  --app-plastic-paint: #DC931A;   /* رنگ پلاستیک — amber light, 2.6: decorative only */
  --app-acrylic:     #4BA4DA;     /* رنگ اکریلیک — blue light, 2.8: decorative only */
  --app-insulation:  #50933C;     /* عایق — green dark, 3.8 */
  --app-tape:        #2D6EB0;     /* چسب نواری — blue dark, 5.3 */
  --app-additives:   #6A3FA0;     /* افزودنی‌ها — NOT in the logo; placeholder, 7.4. Confirm with the company. */

  /* Unused logo shades, kept for brand artwork */
  --logo-red-dark:     #A71021;
  --logo-magenta-dark: #8F0A5B;
  --logo-brown-dark:   #804D22;
  --logo-green-light:  #8CB335;   /* 2.4 on white: decorative only */

  /* Status */
  --green-700: #1E7B45;  --green-50: #E8F5EE;
  --red-700:   #B42318;  --red-50:   #FDECEA;
  --amber-800: #8A5A00;  --amber-50: #FDF4E1;

  /* Type families */
  --font-vazirmatn: "Vazirmatn", Tahoma, system-ui, sans-serif;
  --font-outfit:    "Outfit", "Vazirmatn", sans-serif;
    
  /* Type scale (rem, 16px base). Persian needs taller line-heights. */
  --size-12: 0.8125rem;  /* 13px: smallest allowed (captions, table units) */
  --size-14: 0.875rem;
  --size-16: 1rem;
  --size-18: 1.125rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-30: 1.875rem;
  --size-36: 2.25rem;
  --size-48: 3rem;

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

  --leading-tight: 1.5;   /* headings */
  --leading-snug:  1.6;   /* UI, table cells */
  --leading-body:  1.8;   /* paragraphs */

  /* Spacing: 4/8pt rhythm */
  --space-0:  0;
  --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 */
  --space-16: 4rem;     /* 64 */
  --space-24: 6rem;     /* 96 */

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;    /* buttons, tiles */
  --radius-lg: 10px;   /* cards, boxes */
  --radius-xl: 12px;   /* outer sheets */
  --radius-pill: 999px;

  /* Shadow: soft only, alpha < 0.08 */
  --shadow-1: 0 1px 2px rgb(19 33 58 / 0.05);
  --shadow-2: 0 2px 8px rgb(19 33 58 / 0.06), 0 1px 2px rgb(19 33 58 / 0.04);
  --shadow-3: 0 8px 24px rgb(19 33 58 / 0.07);

  /* Motion: 100/150/200/300ms only; ease-out to enter, ease-in to exit; animate transform/opacity only. Unused today. */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
}

/* === 2. SEMANTIC ======================================================== */
:root {
  /* Surfaces */
  --color-bg:             var(--gray-50);
  --color-surface:        var(--white);
  --color-surface-raised: var(--white);
  --color-surface-inverse: var(--navy-900);
  --color-surface-hover:  var(--blue-50);
  --color-surface-selected: var(--blue-50);

  /* Text */
  --color-text:          var(--navy-700);
  --color-text-strong:   var(--ink);
  --color-text-muted:    var(--gray-600);
  --color-text-inverse:  var(--white);
  --color-text-inverse-muted: var(--gray-on-navy);
  --color-link:          var(--blue-700);
  --color-link-hover:    var(--blue-800);

  /* Borders */
  --color-border-subtle: var(--gray-200);   /* surface outline, decorative */
  --color-divider:       var(--gray-100);   /* hairline table rows */
  --color-border-ui:     var(--gray-400);   /* inputs, checkboxes: needs 3:1 */
  --border-hairline: 1px solid var(--color-divider);
  --border-subtle:   1px solid var(--color-border-subtle);

  /* Actions */
  --color-primary:        var(--blue-700);
  --color-primary-hover:  var(--blue-800);
  --color-on-primary:     var(--white);
  --color-quote:          var(--blue-700);    /* this design has one action colour */
  --color-quote-hover:    var(--blue-800);
  --color-on-quote:       var(--white);

  /* Focus: 3px, 2px offset. Brand blue on light surfaces; light blue #7FB8E6 on brand bars
     (it is only 2:1 on white, so never used there). */
  --focus-color:          var(--blue-700);
  --focus-color-inverse:  var(--focus-on-dark); /* on brand bars */
  --focus-width:  3px;
  --focus-offset: 2px;
  --focus-ring: var(--focus-width) solid var(--focus-color);

  /* Status */
  --color-success: var(--green-700); --color-success-bg: var(--green-50);
  --color-danger:  var(--red-700);   --color-danger-bg:  var(--red-50);
  --color-warning: var(--amber-800); --color-warning-bg: var(--amber-50);

  /* Typography roles */
  --font-body:    var(--font-vazirmatn);
  --font-heading: var(--font-vazirmatn);
  --font-code:    var(--font-outfit);    /* product codes: HP 100, CP 220 */

  --text-caption: var(--weight-regular) var(--size-12)/var(--leading-snug) var(--font-body);
  --text-small:   var(--weight-regular) var(--size-14)/var(--leading-snug) var(--font-body);
  --text-body:    var(--weight-regular) var(--size-16)/var(--leading-body) var(--font-body);
  --text-lead:    var(--weight-regular) var(--size-18)/var(--leading-body) var(--font-body);
  --text-h4:      var(--weight-bold) var(--size-18)/var(--leading-tight) var(--font-heading);
  --text-h3:      var(--weight-bold) var(--size-20)/var(--leading-tight) var(--font-heading);
  --text-h2:      var(--weight-bold) var(--size-24)/var(--leading-tight) var(--font-heading);
  --text-h1:      var(--weight-bold) var(--size-30)/var(--leading-tight) var(--font-heading);
  --text-display: var(--weight-bold) var(--size-36)/var(--leading-tight) var(--font-heading);

  /* Layout */
  --container-max: 1200px;
  --container-gutter: var(--space-4);    /* 16px at 375px */
  --measure: 68ch;                       /* paragraph line length */
  --hit-target: 44px;
  --header-height: 64px;
}

@media (min-width: 768px) {
  :root {
    --container-gutter: var(--space-8);
    --text-h1:      var(--weight-bold) var(--size-36)/var(--leading-tight) var(--font-heading);
    --text-display: var(--weight-bold) var(--size-48)/var(--leading-tight) var(--font-heading);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* === 3. COMPONENTS ====================================================== */
:root {
  /* Button (shared) */
  --button-height:  var(--hit-target);
  --button-padding-inline: var(--space-5);
  --button-radius:  var(--radius-md);
  --button-font:    var(--weight-semibold) 0.9375rem/1 var(--font-body);

  /* Button: primary (drum blue) */
  --button-primary-bg:       var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-hover);
  --button-primary-fg:       var(--color-on-primary);

  /* Button: quote (amber, one per view) */
  --button-quote-bg:       var(--color-quote);
  --button-quote-bg-hover: var(--color-quote-hover);
  --button-quote-fg:       var(--color-on-quote);

  /* Button: secondary (outline) */
  --button-secondary-bg:       var(--color-surface);
  --button-secondary-bg-hover: var(--color-surface-hover);
  --button-secondary-fg:       var(--color-primary);
  --button-secondary-border:   1px solid var(--color-primary);

  /* Surface / card */
  --card-bg:      var(--color-surface);
  --card-border:  var(--border-subtle);
  --card-radius:  var(--radius-lg);
  --card-shadow:  var(--shadow-1);
  --card-shadow-hover: var(--shadow-2);
  --card-padding: var(--space-6);

  /* Spec / comparison table */
  --table-bg:           var(--color-surface);
  --table-border:       var(--border-subtle);
  --table-radius:       var(--radius-lg);
  --table-head-bg:      var(--color-surface-inverse);
  --table-head-fg:      var(--color-text-inverse);
  --table-head-font:    var(--weight-medium) var(--size-14)/var(--leading-snug) var(--font-body);
  --table-row-divider:  var(--border-hairline);
  --table-row-hover:    var(--color-surface-hover);
  --table-cell-padding: var(--space-3) var(--space-4);
  --table-cell-font:    var(--text-small);
  --table-unit-color:   var(--color-text-muted);   /* cP, %, °C */

  /* Product code (Outfit, always LTR) */
  --product-code-font:  var(--font-code);
  --product-code-size:  var(--size-20);
  --product-code-size-lg: var(--size-36);
  --product-code-color: var(--color-text-strong);
  --product-code-tracking: -0.02em;

  /* Application marker (pinwheel triangle, never a fill) */
  --app-marker-size: 10px;

  /* Input */
  --input-height:   var(--hit-target);
  --input-bg:       var(--color-surface);
  --input-fg:       var(--color-text-strong);
  --input-border:   1px solid var(--color-border-ui);
  --input-border-error: 1px solid var(--color-danger);
  --input-radius:   var(--radius-md);
  --input-padding-inline: var(--space-3);
  --label-font:     var(--weight-medium) var(--size-14)/var(--leading-snug) var(--font-body);
  --label-color:    var(--color-text-strong);
  --hint-color:     var(--color-text-muted);

  /* Header & footer */
  --header-bg:      var(--color-surface-inverse);
  --header-fg:      var(--color-text-inverse);
  --header-fg-muted: var(--color-text-inverse-muted);
  --footer-bg:      var(--color-surface-inverse);
  --footer-fg:      var(--color-text-inverse-muted);
  --footer-link:    var(--color-text-inverse);
}

/* Dark surfaces (header, footer, table head) swap the focus ring to bright amber. */
.surface-inverse,
[data-surface="inverse"] {
  --focus-color: var(--focus-color-inverse);
  --focus-ring: var(--focus-width) solid var(--focus-color);  /* re-declare: var() resolves where it is set */
}