@use "palette-colors" as *;

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

// Semantic surface aliases from Figma variable collection
$surface-page:    $neutral-0;
$surface-primary: $neutral-0;
$surface-secondary:$mint-300;
$surface-accent:  $yellow-300;
$surface-surface: $neutral-100;
$surface-panel:   $neutral-100;
$surface-panel-muted: $neutral-50;
$surface-panel-strong: rgba($neutral-900, 0.08);

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

$border-width-base:   1px;
$border-width-accent: 2px;
$border-style-base:   solid;
$border-color-base:   $neutral-900;
$border-color-muted:  $neutral-300;

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

// Figma kit uses rounded cards, buttons and inputs.
// Exact token was not visible in the style guide images;
// refine via Playwright comparison against component frames.
$radius-sm:  6px;
$radius-md:  10px;
$radius-lg:  16px;
$radius-xl:  24px;
$radius-full:9999px;

/* =========================
   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;
  }
}