/* ============================================================================
   Sea Potential — Design Tokens
   Derived from Figma variables in file C54qSo0607gKgj42pvWwWt.

   Two sources, reconciled (overlapping values matched exactly):
     - "SP Platform — Full Build (Brand) — FROZEN SoT"  (node 269:5604) — screens
     - "SP Semantic Components (WIP)"                    (node 222:2)    — system
   The components page contributes the primitive layer (spacing, radius, focus,
   sizing, interactive states, full badge set); the screens contribute the
   semantic colors. Where both define a value, they agree.

   Naming: Figma variable paths mapped to kebab-case custom properties
     color/text/primary   -> --color-text-primary
     space/4              -> --space-4
     SP/Heading Small     -> --sp-heading-small-* (type styles decomposed)

   CANONICAL token set for the build. No raw hex anywhere in HTML/CSS/JS/SVG —
   reference these variables only.
   ============================================================================ */

:root {
  /* ======================================================================= */
  /* COLOR                                                                    */
  /* ======================================================================= */

  /* ---- Surface ----------------------------------------------------------- */
  --color-surface-page:           #ede5dc;
  --color-surface-card:           #ede5dc;  /* identical to page — separated by --sp-card-shadow */
  --color-surface-placeholder:    #21212133; /* #212121 @ 20% */
  --color-surface-structural-dark:#0d3b3e;
  --color-surface-input-disabled: #2121210d; /* #212121 @ 5% */
  --color-surface-dropzone-active:#2e78781a; /* border-input-focus @ 10% — file dragged over a dropzone */
  --color-surface-scrim:         #0d3b3e99; /* surface-structural-dark @ 60% — behind a modal dialog */

  /* ---- Text -------------------------------------------------------------- */
  --color-text-primary:   #392215;
  --color-text-secondary: #212121b2; /* #212121 @ ~70% */
  --color-text-on-dark:   #ede5dc;
  --color-text-link:      #1b5a56;

  /* ---- Action · Primary -------------------------------------------------- */
  --color-action-primary:        #b18767;
  --color-action-primary-text:   #392215;  /* == text-primary */
  --color-action-primary-border: #392215;  /* == text-primary */
  --color-action-primary-hover:  #b89274;  /* NOTE: lighter than default (WIP) */
  --color-action-primary-active: #b18767;  /* NOTE: identical to default (WIP) */

  /* ---- Profile chip (UX pass, Jul 29–30) --------------------------------- */
  /* ADDED TOKEN (logged in OVERNIGHT_BUILD_LOG Task 7): brief specifies the
     profile chip fill as Light Brown #AA7D5A, which no existing token equals
     (nearest is --color-action-primary #b18767). Border reuses the canonical
     Dark Brown; text reuses the primary-action text token. */
  --color-profile-chip-fill:   #AA7D5A;
  --color-profile-chip-border: var(--color-action-primary-border); /* #392215 */
  --color-profile-chip-text:   var(--color-action-primary-text);   /* #392215 */

  /* ---- Action · Secondary ------------------------------------------------ */
  --color-action-secondary-text:      #1b5a56; /* == text-link */
  --color-action-secondary-border:    #1b5a56;
  --color-action-secondary-hover-bg:  #2121210d; /* #212121 @ 5% */
  --color-action-secondary-active-bg: #2121211a; /* #212121 @ 10% */

  /* ---- Action · Disabled ------------------------------------------------- */
  --color-action-disabled-text: #2121214d; /* #212121 @ 30% */
  --color-action-disabled-bg:   #2121211a; /* #212121 @ 10% */

  /* ---- Border ------------------------------------------------------------ */
  --color-border-default:       #21212133; /* #212121 @ 20% */
  /* ADDED, run jsqa-0921 (QA item P2-4). A card boundary that MEETS WCAG 2.2
     SC 1.4.11 Non-text Contrast, which asks for 3:1 against what is adjacent.
     Measured 3.31:1 against --color-surface-page #ede5dc; --color-border-default
     above measures 1.48:1, less than half of what the criterion requires.
     Derived from --color-text-primary #392215 at 60% rather than from a new
     hue, so it is the brand's own dark brown on the brand's own warm ground.
     NOT a replacement for --color-border-default: hairlines INSIDE a component
     (a divider between two rows of the same card) are decoration and the
     criterion does not reach them. This is for the edge of a card, where it is
     the only thing telling a person where one module stops and the next
     begins — see .job-card, .panel and .filter-rail in styles.css. */
  --color-border-strong:        #39221599; /* #392215 @ 60% — 3.31:1 on the page surface */
  --color-border-input:         #21212199; /* #212121 @ 60% */
  --color-border-input-hover:   #212121cc; /* #212121 @ 80% */
  --color-border-input-focus:   #2e7878;
  --color-border-input-disabled:#21212133; /* == border-default */
  --color-border-input-error:   #9d291f;   /* == error */

  /* ---- Feedback ---------------------------------------------------------- */
  --color-error:        #9d291f;
  --color-warning-fill: #f2e8b0;

  /* ---- Focus ------------------------------------------------------------- */
  --color-focus-ring: #0d3b3e; /* == surface-structural-dark */

  /* ---- Badge ------------------------------------------------------------- */
  --color-badge-success-bg:   #dcedea;
  --color-badge-success-text: #0d3b3e;
  --color-badge-warning-bg:   #f2e8b0; /* == warning-fill */
  --color-badge-warning-text: #5d3a18;
  --color-badge-error-bg:     #f3e0dd;
  --color-badge-error-text:   #9d291f; /* == error */
  --color-badge-neutral-bg:   #ece7e0;
  --color-badge-neutral-text: #212121; /* base grey (no alpha) */

  /* ---- Pill (step / stepper indicator) ----------------------------------- */
  --color-pill-complete-bg:     #1b5a56; /* == text-link */
  --color-pill-complete-text:   #ede5dc;
  --color-pill-current-bg:      #b18767; /* == action-primary */
  --color-pill-current-text:    #392215;
  --color-pill-current-border:  #392215;
  --color-pill-upcoming-bg:     #2121211a; /* #212121 @ 10% */
  --color-pill-upcoming-text:   #212121b2;
  --color-pill-upcoming-border: #2121214d; /* #212121 @ 30% */

  /* ---- Progress ---------------------------------------------------------- */
  --color-progress-track: #2121211a; /* #212121 @ 10% */
  --color-progress-fill:  #1b5a56;   /* == text-link */

  /* ======================================================================= */
  /* SPACING  (space/N scale, px)                                             */
  /* ======================================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* ======================================================================= */
  /* RADIUS                                                                   */
  /* ======================================================================= */
  --radius-button: 8px;

  /* ======================================================================= */
  /* SIZING / BORDER                                                          */
  /* ======================================================================= */
  --border-width-control: 1px;
  --focus-ring-width:     2px;
  --touch-target-min:     44px;

  /* ======================================================================= */
  /* TYPOGRAPHY                                                               */
  /* ======================================================================= */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body:    "Lora", Georgia, serif;

  /* SP/Display Large — Playfair Display Bold 48 (hero; not a Figma variable —
     added to tokenize untokenized 48px display text, e.g. S-01 Login) */
  --sp-display-large-family:  var(--font-heading);
  --sp-display-large-size:    48px;
  --sp-display-large-weight:  700;
  --sp-display-large-line:    1;
  --sp-display-large-spacing: 0;

  /* SP/Display Medium — Playfair Display Bold 32 (hero; not a Figma variable —
     added to tokenize untokenized 32px display text, e.g. AP-01/02/03) */
  --sp-display-medium-family:  var(--font-heading);
  --sp-display-medium-size:    32px;
  --sp-display-medium-weight:  700;
  --sp-display-medium-line:    1;
  --sp-display-medium-spacing: 0;

  /* SP/Heading Small — Playfair Display Bold 26 / 100% */
  --sp-heading-small-family:  var(--font-heading);
  --sp-heading-small-size:    26px;
  --sp-heading-small-weight:  700;
  --sp-heading-small-line:    1;
  --sp-heading-small-spacing: 0;

  /* SP/Body — Lora Regular 16 / 100% */
  --sp-body-family:  var(--font-body);
  --sp-body-size:    16px;
  --sp-body-weight:  400;
  --sp-body-line:    1;
  --sp-body-spacing: 0;

  /* SP/Body Bold — Lora Bold 16 / 100% */
  --sp-body-bold-family:  var(--font-body);
  --sp-body-bold-size:    16px;
  --sp-body-bold-weight:  700;
  --sp-body-bold-line:    1;
  --sp-body-bold-spacing: 0;

  /* SP/Caption — Lora Regular 14 / 100% */
  --sp-caption-family:  var(--font-body);
  --sp-caption-size:    14px;
  --sp-caption-weight:  400;
  --sp-caption-line:    1;
  --sp-caption-spacing: 0;

  /* SP/Label Small — Lora Bold 13 / 100% */
  --sp-label-small-family:  var(--font-body);
  --sp-label-small-size:    13px;
  --sp-label-small-weight:  700;
  --sp-label-small-line:    1;
  --sp-label-small-spacing: 0;

  /* ======================================================================= */
  /* EFFECT                                                                   */
  /* ======================================================================= */
  /* SP/Card Shadow — drop shadow #212121 @ 10%, offset (0,2), blur 8 */
  --sp-card-shadow: 0 2px 8px 0 #0000001a;
}