@use "palette-colors" as *;

/* =========================
   SURFACES
========================= */

// Semantic surface aliases from Mode 1 tokens
$surface-page:    $neutral-0;          // pure white / page bg
$surface-primary: $neutral-50;         // color.bg.primary
$surface-secondary:$mint-300;          // color.bg.secondary
$surface-accent:  $yellow-300;         // color.bg.accent / cta-bg
$surface-surface: $neutral-100;        // color.bg.surface
$surface-panel:   $neutral-100;        // color.bg.surface
$surface-panel-muted: $neutral-50;      // color.bg.primary
$surface-panel-strong: rgba($neutral-900, 0.08);

/* =========================
   BORDERS
========================= */

$border-width-hairline: 1px;
$border-width-base:     1px;
$border-width-thick:    2px;
$border-width-accent:   2px;
$border-style-base:     solid;
$border-color-base:     $neutral-300;   // color.border.default
$border-color-muted:    $neutral-100;   // color.border.light
$border-color-mint:     $mint-600;      // color.border.mint

/* =========================
   TYPOGRAPHY
========================= */

$font-size-xs:    12px;
$font-size-sm:    14px;
$font-size-md:    15px;
$font-size-base:  16px;
$font-size-lg:    18px;
$font-size-xl:    22px;

$font-size-h1: 40px;
$font-size-h2: 32px;
$font-size-h3: 28px;
$font-size-h4: 22px;
$font-size-h5: 18px;
$font-size-h6: 16px;

$line-height-base:    1;
$line-height-tight:  1.15;
$line-height-snug:   1.25;
$line-height-normal: 1.4;
$line-height-relaxed: 1.6;

$letter-spacing-tight:  -0.02em;
$letter-spacing-normal: 0;
$letter-spacing-wide:   0.04em;

/* =========================
   RADIUS
========================= */

// Radius scale from radius.tokens.json
$radius-xs:  4px;
$radius-sm:  8px;
$radius-md:  12px;
$radius-lg:  16px;
$radius-xl:  20px;   // card radius
$radius-2xl: 24px;   // surface-modal radius
$radius-full: 999px; // button/badge/avatar/icon-button

/* =========================
   MOTION
========================= */

$motion-fast: 0.15s;
$motion-base: 0.2s;
$motion-slow: 0.28s;
$motion-ease: ease;

/* =========================
   CONTROL SIZES
========================= */

$control-height-sm: 34px;
$control-height-md: 42px;
$control-height-lg: 52px;
$control-icon-rail-md: 40px;
$control-icon-rail-sm: 28px;
$control-choice-size: 20px;
$control-switch-width: 32px;
$control-switch-height: 16px;
$control-switch-knob: 20px;

/* =========================
   ICONS
========================= */

$icon-size-xs: 12px;
$icon-size-sm: 16px;
$icon-size-md: 20px;
$icon-size-lg: 24px;
$icon-size-xl: 28px;
$icon-size-display: 48px;

/* =========================
   FOCUS
========================= */

$focus-outline-width: 2px;
$focus-outline-offset: 2px;
$focus-outline-color: $mint-600;

@mixin focus_ring {
  outline: $focus-outline-width solid $focus-outline-color;
  outline-offset: $focus-outline-offset;
}

@mixin hard_panel($border-color: $border-color-muted, $accent-width: 0) {
  background: $surface-panel-muted;
  border: $border-width-base $border-style-base $border-color;
  border-radius: $radius-md;

  @if $accent-width != 0 {
    border-left-width: $accent-width;
  }
}

@mixin state_panel($color, $text-color: $neutral-0) {
  border-color: $color;

  .card-title,
  .toast-title,
  .modal-title {
    color: $text-color;
    background: $color;
  }
}

@mixin hover_touch {
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      @content;
    }
  }

  @media (hover: none) and (pointer: coarse) {
    &:active {
      @content;
    }
  }
}