/* tokens.css: common design tokens (UI_STYLE_GUIDE section 1, 7, 8).
   This is the ONLY file that knows the screen tiers. Every other file reads variables only.
   Raw px values live on the definition lines of this file and of skin-gb.css / skin-ps1.css, nowhere else.
   Colours are skin data (skin-*.css); this file holds sizes, spacing, layout dimensions, z and motion. */

@layer reset, tokens, layout, components, skin, state;

@layer tokens {
  /* ---- tier l (1920x1080, the base) ---- */
  :root {
    --px: 1px;
    --pw: 120; --ph: 163; /* native size of the witch portrait art */
    --text-scale: 1;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);

    /* spacing (4px grid) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

    /* PS1 type scale, base values (skin-ps1.css applies --text-scale and the floor) */
    --fs-h1-base: 32px; --fs-h2-base: 24px; --fs-body-base: 18px; --fs-note-base: 15px; --fs-num-base: 22px;
    --fs-badge: 12px; --fs-floor: 14px;
    --lh-body: 1.5; --lh-tight: 1.2;
    --ls-caps: 0.12em; --ls-jp: 0.04em;

    /* GB type scale: multipliers of the pixel font design size (skin-gb.css owns the glyph size) */
    --gb-dot-tier: 3px; --gb-dot: var(--gb-dot-fit, var(--gb-dot-tier));
    --gb-mul-body: 1; --gb-mul-h2: 2; --gb-mul-h1: 3;

    /* layout dimensions */
    --lay-pad: 24px; --lay-gap: 12px; --lay-rail-w: 504px; --lay-msg-h: 120px; --lay-guide-h: 40px;
    --lay-hud-h: 0px; --lay-deck-h: 0px; --lay-tab-h: 48px;
    --lay-row-h: 48px; --lay-btn-h: 48px; --lay-hit-min: 44px; --lay-desc-h: 72px;
    --lay-menu-list-w: 34%; --lay-portrait-w: 360px; --lay-gauge-hp-h: 20px; --lay-gauge-sub-h: 12px;
    --lay-dpad-cell: 56px; --lay-action-w: 88px; --lay-action-h: 76px;
    --sym-size: 20px; --range-cell: 40px; --minimap-w: 456px; --minimap-h: 256px;
    --map-cols-min: 17; --map-rows-min: 11; --portrait-s: 2;
    --d-portrait: flex; --d-portrait-cap: block; --d-hints: flex; --d-desc-text: flex; --d-threat-note: inline; --d-log-old: block; --gb-d-log-old: block; --gb-log-lines: 3;
    --d-range: block; --d-title-meta: inline; --d-detail-extra: flex; --d-detail-react: flex; --tab-active-grow: 1; --head-reserve: 0px; --portrait-pad: 16px; --portrait-max-h: 100vh; --log-pad-y: 8px;

    /* Product flows */
    --guide-key-pad-x: var(--sp-4);
    --lay-flow-w: 1180px; --lay-title-w: 600px; --lay-title-menu-w: 360px;
    --lay-flow-card-w: 340px; --lay-flow-range-w: 120px; --lay-warehouse-name-w: 200px;
    --lay-debug-card-w: 260px; --lay-debug-max-h: 70dvh; --lay-title-menu-wide-w: 500px;

    /* z layers */
    --z-bg: 0; --z-map: 1; --z-field: 10; --z-touch: 20; --z-menu: 30; --z-dialog: 40; --z-flow: 50; --z-toast: 60; --z-dev: 90;

    /* motion */
    --dur-fast: 120ms; --dur-base: 160ms; --dur-blink: 500ms; --ease-out: ease-out;
  }

  /* ---- tier xl (2560x1440) ---- */
  @media (min-width: 2200px) and (min-height: 1200px) {
    :root {
      --sp-4: 20px; --sp-6: 32px; --sp-8: 48px;
      --fs-h1-base: 42px; --fs-h2-base: 30px; --fs-body-base: 24px; --fs-note-base: 20px; --fs-num-base: 30px;
      --gb-dot-tier: 4px; --gb-mul-body: 2; --gb-mul-h2: 3; --gb-mul-h1: 4;
      --lay-pad: 32px; --lay-gap: 16px; --lay-rail-w: 640px; --lay-msg-h: 168px; --lay-guide-h: 56px; --lay-tab-h: 64px;
      --lay-row-h: 64px; --lay-btn-h: 64px; --lay-desc-h: 96px; --lay-portrait-w: 480px;
      --lay-gauge-hp-h: 28px; --lay-gauge-sub-h: 16px; --sym-size: 28px; --range-cell: 44px; --minimap-w: 576px; --minimap-h: 320px;
      --portrait-s: 3;
    }
  }

  /* ---- tier m (1280x720) ---- */
  @media (orientation: landscape) and (max-width: 1599px) and (min-height: 521px) {
    :root {
      --sp-6: 24px; --sp-8: 32px;
      --fs-h1-base: 27px; --fs-h2-base: 20px; --fs-body-base: 15px; --fs-note-base: 14px; --fs-num-base: 18px;
      --lh-body: 1.45;
      --gb-dot-tier: 2px; --gb-mul-body: 1; --gb-mul-h2: 2; --gb-mul-h1: 2;
      --lay-pad: 16px; --lay-gap: 8px; --lay-rail-w: 320px; --lay-msg-h: 88px; --lay-guide-h: 32px; --lay-tab-h: 40px;
      --lay-row-h: 40px; --lay-btn-h: 44px; --lay-desc-h: 56px; --lay-menu-list-w: 38%; --lay-portrait-w: 240px;
      --lay-gauge-hp-h: 16px; --lay-gauge-sub-h: 10px; --sym-size: 16px; --range-cell: 20px; --minimap-w: 288px; --minimap-h: 160px;
      --portrait-s: 1; --d-range: none;
    }
  }

  /* ---- tier sl (844x390, phone landscape) ---- */
  @media (orientation: landscape) and (max-height: 520px) {
    :root {
      --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-6: 16px; --sp-8: 24px;
      --fs-h1-base: 22px; --fs-h2-base: 16px; --fs-body-base: 14px; --fs-note-base: 14px; --fs-num-base: 16px;
      --lh-body: 1.4;
      --gb-dot-tier: 2px; --gb-mul-body: 1; --gb-mul-h2: 1; --gb-mul-h1: 1;
      --guide-key-pad-x: var(--sp-2);
      --lay-pad: max(4px, var(--safe-l)); --lay-gap: 4px; --lay-rail-w: 128px; --lay-msg-h: 52px; --lay-guide-h: 0px; --lay-tab-h: 36px;
      --lay-row-h: 36px; --lay-btn-h: 44px; --lay-desc-h: 56px; --lay-menu-list-w: 40%; --lay-portrait-w: 0px;
      --lay-gauge-hp-h: 14px; --lay-gauge-sub-h: 8px; --sym-size: 14px; --minimap-w: 116px; --minimap-h: 72px;
      --lay-dpad-cell: 44px; --lay-action-w: 60px; --lay-action-h: 56px;
      --map-cols-min: 11; --map-rows-min: 7; --d-portrait: none; --d-range: none; --d-title-meta: none; --d-detail-extra: none; --d-detail-react: none; --d-threat-note: none; --d-log-old: none; --gb-d-log-old: none; --gb-log-lines: 2; --log-pad-y: 4px;
    }
  }

  /* ---- tier sp (390x844, phone portrait) ---- */
  @media (orientation: portrait) and (max-width: 600px) {
    :root {
      --sp-6: 20px; --sp-8: 24px;
      --fs-h1-base: 24px; --fs-h2-base: 18px; --fs-body-base: 15px; --fs-note-base: 14px; --fs-num-base: 18px;
      --lh-body: 1.45;
      --gb-dot-tier: 2px; --gb-mul-body: 1; --gb-mul-h2: 1; --gb-mul-h1: 2;
      --lay-pad: 8px; --lay-gap: 4px; --lay-msg-h: 76px; --lay-guide-h: 0px; --lay-hud-h: 40px; --lay-deck-h: 212px; --lay-tab-h: 56px;
      --lay-row-h: 56px; --lay-btn-h: 56px; --lay-desc-h: 72px; --lay-menu-list-w: 100%; --lay-portrait-w: 72px;
      --lay-gauge-hp-h: 16px; --lay-gauge-sub-h: 10px; --sym-size: 16px; --minimap-w: 96px; --minimap-h: 64px;
      --map-cols-min: 9; --map-rows-min: 13; --portrait-s: 1; --d-portrait: none; --d-portrait-cap: none; --d-hints: none; --d-tab-en-idle: none; --d-tab-ja-idle: none; --gb-tab-ico: block; --d-desc-text: none; --d-range: none; --d-title-meta: none; --d-detail-extra: none; --d-detail-react: none; --tab-active-grow: 2.4; --head-reserve: 0px; --d-threat-note: none; --d-log-old: none; --gb-d-log-old: none; --gb-log-lines: 2;
      --portrait-pad: 0px; --portrait-max-h: 72px; --log-pad-y: 4px;
    }
  }

  /* ---- tablet portrait (768x1024): portrait layout with tier m dimensions ---- */
  @media (orientation: portrait) and (min-width: 601px) {
    :root {
      --fs-h1-base: 27px; --fs-h2-base: 20px; --fs-body-base: 15px; --fs-note-base: 14px; --fs-num-base: 18px;
      --lh-body: 1.45;
      --gb-dot-tier: 2px; --gb-mul-body: 1; --gb-mul-h2: 2; --gb-mul-h1: 2;
      --lay-pad: 16px; --lay-gap: 8px; --lay-msg-h: 88px; --lay-guide-h: 0px; --lay-hud-h: 56px; --lay-deck-h: 240px; --lay-tab-h: 48px;
      --lay-row-h: 56px; --lay-btn-h: 56px; --lay-desc-h: 72px; --lay-menu-list-w: 100%; --lay-portrait-w: 96px;
      --lay-gauge-hp-h: 16px; --lay-gauge-sub-h: 10px; --sym-size: 16px; --minimap-w: 128px; --minimap-h: 80px;
      --map-cols-min: 9; --map-rows-min: 13; --portrait-s: 1; --d-portrait: none; --d-portrait-cap: none; --d-hints: none; --d-tab-en-idle: none; --d-tab-ja-idle: none; --gb-tab-ico: block; --d-desc-text: none;
      --portrait-pad: 0px; --portrait-max-h: 96px; --log-pad-y: 8px;
    }
  }
}