/* /assets/css/design-tokens.css
   ALA求人 Design Tokens Public Freeze V1
   Public V1-2-7

   目的:
   色・文字・幅・余白・角丸・影・主要コンポーネント設定を一元管理します。
   ALA求人 UI Theme Principles V1:
   - 専門可信
   - 清晰易用
   - 稍带温度
   - 稳定可扩展

   注意:
   既存 CSS との互換性を保つため、旧 token 名も残しています。
   後続の Button / Card / Form / Badge / Message System で
   job.desktop.css 側を段階的にこの token に接続していきます。
*/

:root {
  /* =========================================================
     1. Brand / Primitive Colors
     ========================================================= */

  /* Navy: 信頼・構造・ナビゲーション */
  --color-brand-navy: #153b6b;
  --color-brand-navy-2: #214f87;
  --color-brand-navy-soft: #eef5fc;

  /* Gold / Warm Brown: logo 氛围・勤務地・少量品牌点缀 */
  --color-brand-gold: #c6924a;
  --color-brand-gold-light: #d6a15c;
  --color-brand-gold-dark: #8f552e;
  --color-brand-gold-soft: #fffaf2;
  --color-brand-gold-border: #f0d7ad;

  /* Orange: Primary action color. 金色とは分離して、最重要CTAだけに使う */
  --color-brand-orange: #d96b1c;
  --color-brand-orange-hover: #c85f18;
  --color-brand-orange-dark: #a94f14;
  --color-brand-orange-soft: #fff3e8;
  --color-brand-orange-border: #f0c39c;

  /* Neutral */
  --color-white: #ffffff;
  --color-gray-50: #f7fafe;
  --color-gray-75: #f3f6fa;
  --color-gray-100: #eef2f6;
  --color-gray-200: #dbe4ef;
  --color-gray-300: #cfd8e3;
  --color-gray-500: #667085;
  --color-gray-700: #344054;
  --color-gray-900: #1f2937;

  /* =========================================================
     2. Compatibility Aliases
     既存 job.desktop.css が参照している token 名を維持
     ========================================================= */

  --color-primary: var(--color-brand-navy);
  --color-primary-2: var(--color-brand-navy-2);
  --color-accent: var(--color-brand-gold);

  --color-bg-page: var(--color-gray-100);
  --color-bg-card: var(--color-white);
  --color-bg-soft: var(--color-gray-50);
  --color-bg-warm: var(--color-brand-gold-soft);

  --color-text-main: var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-white);

  --color-border: var(--color-gray-200);
  --color-border-soft: #e2eaf4;
  --color-error: #b42318;

  /* =========================================================
     3. Semantic Colors
     ========================================================= */

  /* Action */
  --color-action-primary: var(--color-brand-orange);
  --color-action-primary-hover: var(--color-brand-orange-hover);
  --color-action-primary-dark: var(--color-brand-orange-dark);
  --color-action-primary-soft: var(--color-brand-orange-soft);
  --color-action-primary-border: var(--color-brand-orange-border);

  --color-action-secondary: var(--color-brand-navy);
  --color-action-secondary-hover: var(--color-brand-navy-2);
  --color-action-light-bg: linear-gradient(180deg, #ffffff 0%, #edf2f7 100%);
  --color-action-light-border: var(--color-gray-300);
  --color-action-light-text: var(--color-brand-navy);

  /* Status: new / error */
  --color-status-new: #b42318;
  --color-status-new-bg: #fff1f0;
  --color-status-new-border: #ffccc7;

  --color-status-error: #b42318;
  --color-status-error-bg: #fff4f2;
  --color-status-error-border: #ffd1cc;

  /* Status: updated / success */
  --color-status-updated: #16703a;
  --color-status-updated-bg: #e9f8ef;
  --color-status-updated-border: #a7dfbd;

  --color-status-success: #14532d;
  --color-status-success-bg: #f0faf4;
  --color-status-success-border: #bbebcd;

  /* Status: warning / soft guidance */
  --color-status-warning: #8a560f;
  --color-status-warning-bg: #fffaf2;
  --color-status-warning-border: #f0d7ad;

  /* Section title bar */
  --color-section-bar-bg: var(--color-gray-75);
  --color-section-bar-border: var(--color-gray-200);
  --color-section-bar-text: var(--color-brand-navy);

  /* =========================================================
     4. Typography
     ========================================================= */

  --font-family-base:
    "Meiryo",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Sans",
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif;
  --font-family-heading: var(--font-family-base);

  /* Base */
  --fs-body: 16px;

  /* Brand / Navigation */
  --fs-brand: 42px;
  --fs-brand-sub: 17px;
  --fs-menu: 18px;

  /* Page / Section */
  --fs-page-title: 32px;
  --fs-section-title: 24px;
  --fs-subsection-title: 20px;

  /* Cards */
  --fs-card-title: 26px;
  --fs-card-salary: 19px;
  --fs-card-body: 16px;
  --fs-card-meta: 13px;

  /* Detail */
  --fs-detail-title: 32px;
  --fs-detail-heading: 21px;
  --fs-detail-body: 17px;
  --fs-detail-meta: 15.5px;

  /* Left nav */
  --fs-leftnav-title: 17px;
  --fs-leftnav-link: 14.5px;

  /* Sidebar */
  --fs-sidebar-title: 16.5px;
  --fs-sidebar-body: 14px;

  /* Form / Button */
  --fs-form-label: 15px;
  --fs-form-input: 16px;
  --fs-button: 15px;

  /* Misc */
  --fs-footer: 14px;
  --fs-badge: 11px;
  --fs-small: 13px;
  --fs-note: 14px;
  --fs-tag: 14px;
  --fs-featured-title: 18px;
  --fs-featured-salary: 15px;
  --fs-summary-title: 18px;

  /* Font weights */
  --fw-normal: 500;
  --fw-medium: 700;
  --fw-bold: 850;
  --fw-heavy: 900;

  /* Line heights */
  --lh-body: 1.65;
  --lh-title: 1.38;
  --lh-detail: 1.95;
  --lh-form: 1.55;
  --lh-sidebar: 1.75;

  /* =========================================================
     5. Radius
     ========================================================= */

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* =========================================================
     6. Spacing / Padding
     大 padding 方針。section 間・form 間・card 内に余裕を持たせる。
     ========================================================= */

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;

  /* Component spacing */
  --panel-padding-sm: 16px;
  --panel-padding-md: 20px;
  --panel-padding-lg-y: 26px;
  --panel-padding-lg-x: 28px;

  --detail-panel-padding-y: 32px;
  --detail-panel-padding-x: 34px;

  --section-gap: 24px;
  --block-gap: 30px;
  --inline-gap: 16px;
  --form-field-gap: 18px;

  --tag-padding-y: 6px;
  --tag-padding-x: 11px;
  --meta-padding-y: 4px;
  --meta-padding-x: 10px;

  /* Section title bar */
  --section-title-bar-padding-y: 10px;
  --section-title-bar-padding-x: 14px;
  --section-title-bar-margin-bottom: 18px;

  /* =========================================================
     7. Layout
     重複定義を整理。旧変数は互換用に残す。
     ========================================================= */

  --layout-wrap: 1200px;
  --layout-left-nav: 280px;
  --layout-main: 860px;        /* legacy compatibility */
  --layout-entry-main: 860px;
  --layout-detail-main: 860px;
  --layout-utility: 300px;
  --layout-gap: 20px;
  --layout-card-gap: 14px;
  --layout-featured-gap: 7px;

  --header-width-side-padding: 40px;
  --mobile-width-side-padding: 24px;

  --leftnav-sticky-top: 16px;

  /* Search */
  --search-area-width: 150px;
  --search-prof-width: 160px;
  --search-button-width: 96px;

  /* =========================================================
     8. Component Sizes
     ========================================================= */

  --header-height-desktop: 112px;
  --menu-height-desktop: 66px;

  --input-height: 44px;
  --button-height: 44px;
  --button-height-lg: 50px;
  --submit-button-height: 50px;

  --button-padding-x: 20px;
  --button-padding-x-lg: 26px;

  /* =========================================================
     9. Shadows
     ========================================================= */

  --shadow-card: 0 10px 26px rgba(21, 59, 107, 0.08);
  --shadow-soft: 0 6px 16px rgba(21, 59, 107, 0.06);
  --shadow-button-primary: 0 8px 18px rgba(217, 107, 28, 0.22);
  --shadow-button-light:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 2px 5px rgba(21, 59, 107, 0.10);

  /* =========================================================
     10. Button Tokens
     ========================================================= */

  --button-primary-bg: linear-gradient(180deg, #ef8a2f 0%, #d96b1c 100%);
  --button-primary-bg-hover: linear-gradient(180deg, #f0943f 0%, #c85f18 100%);
  --button-primary-text: #ffffff;
  --button-primary-border: rgba(169, 79, 20, 0.30);
  --button-primary-shadow: var(--shadow-button-primary);

  --button-secondary-bg: #ffffff;
  --button-secondary-border: var(--color-border);
  --button-secondary-text: var(--color-brand-navy);

  --button-light-bg: var(--color-action-light-bg);
  --button-light-border: var(--color-action-light-border);
  --button-light-text: var(--color-action-light-text);
  --button-light-shadow: var(--shadow-button-light);

  /* =========================================================
     11. Card Tokens
     ========================================================= */

  --card-bg: var(--color-white);
  --card-border: var(--color-border);
  --card-border-soft: var(--color-border-soft);
  --card-shadow: var(--shadow-card);

  --card-soft-bg: var(--color-bg-soft);
  --card-warm-bg: var(--color-brand-gold-soft);
  --card-warm-border: var(--color-brand-gold-border);

  --card-padding-sm: var(--panel-padding-sm);
  --card-padding-md: var(--panel-padding-md);
  --card-padding-lg-y: var(--panel-padding-lg-y);
  --card-padding-lg-x: var(--panel-padding-lg-x);

  /* =========================================================
     12. Form Tokens
     ========================================================= */

  --form-input-height: var(--input-height);
  --form-input-bg: #ffffff;
  --form-input-border: #d7e1ee;
  --form-input-text: var(--color-text-main);
  --form-input-focus-border: rgba(21, 59, 107, 0.35);
  --form-input-focus-ring: 0 0 0 3px rgba(21, 59, 107, 0.08);

  --form-label-text: var(--color-brand-navy);
  --form-note-text: var(--color-text-muted);

  /* =========================================================
     13. Badge Tokens
     ========================================================= */

  --badge-new-bg: var(--color-status-new-bg);
  --badge-new-border: var(--color-status-new-border);
  --badge-new-text: var(--color-status-new);

  --badge-updated-bg: var(--color-status-updated-bg);
  --badge-updated-border: var(--color-status-updated-border);
  --badge-updated-text: var(--color-status-updated);

  --badge-required-bg: var(--color-brand-orange-soft);
  --badge-required-border: var(--color-brand-orange-border);
  --badge-required-text: var(--color-brand-orange-dark);

  --badge-info-bg: var(--color-bg-soft);
  --badge-info-border: var(--color-border-soft);
  --badge-info-text: var(--color-text-muted);

  /* =========================================================
     14. Message Tokens
     ========================================================= */

  --message-success-bg: var(--color-status-success-bg);
  --message-success-border: var(--color-status-success-border);
  --message-success-text: var(--color-status-success);

  --message-warning-bg: var(--color-status-warning-bg);
  --message-warning-border: var(--color-status-warning-border);
  --message-warning-text: var(--color-status-warning);

  --message-error-bg: var(--color-status-error-bg);
  --message-error-border: var(--color-status-error-border);
  --message-error-text: var(--color-status-error);

  --message-info-bg: var(--color-bg-soft);
  --message-info-border: var(--color-border);
  --message-info-text: var(--color-brand-navy);

  /* =========================================================
     15. Brand logo badge
     既存 logo CSS 互換用。将来 logo system で整理予定。
     ========================================================= */

  --brand-gold: var(--color-brand-gold-dark);
  --brand-gold-light: var(--color-brand-gold-light);
  --brand-gold-dark: var(--color-brand-gold-dark);

  --brand-badge-size: 72px;
  --brand-badge-radius: 18px;
  --brand-symbol-scale: 0.72;


  /* =========================================================
     17. Public V1-2-7 Theme Freeze Additions
     外层 card 轮廓、紧凑阴影、desktop button 宽度等最终确认值。
     ========================================================= */

  --outer-card-radius: var(--radius-sm);
  --outer-card-soft-edge: #3972b4;
  --outer-panel-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -1px -1px 0 rgba(21, 59, 107, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.70),
    0 3px 0 rgba(21, 59, 107, 0.28),
    0 7px 12px rgba(21, 59, 107, 0.24),
    0 2px 5px rgba(21, 59, 107, 0.18);
  --outer-job-card-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.88),
    inset -1px -1px 0 rgba(21, 59, 107, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 2px 0 rgba(21, 59, 107, 0.22),
    0 5px 9px rgba(21, 59, 107, 0.20),
    0 2px 4px rgba(21, 59, 107, 0.16);

  --button-desktop-min-width: 220px;
  --button-desktop-min-width-lg: 260px;
  --button-desktop-radius: var(--radius-pill);

  /* =========================================================
     16. Z-index
     ========================================================= */

  --z-header: 1000;
  --z-menu: 900;
  --z-drawer: 1200;
  --z-modal: 1500;
}

/* =========================================================
   Public V1-3-7C-16:
   Desktop Compatibility Tokens Shadow Merge
   - copied from the confirmed job.desktop.legacy.css :root
   - no visual change intended
   - next step: remove the duplicate :root block from legacy
   ========================================================= */

:root {
  --ala-navy: var(--color-primary);
  --ala-navy-2: var(--color-primary-2);
  --ala-gold: var(--color-accent);

  --ala-bg: var(--color-bg-page);
  --ala-card: var(--color-bg-card);
  --ala-soft: var(--color-bg-soft);
  --ala-line: var(--color-border);

  --ala-text: var(--color-text-main);
  --ala-muted: var(--color-text-muted);
  --ala-shadow: var(--shadow-card);

  --ala-radius: var(--radius-md);
  --ala-radius-sm: var(--radius-sm);
  --ala-radius-lg: var(--radius-lg);
  --wrap: var(--layout-wrap);

  --button-desktop-min-width: 220px;
  --button-desktop-min-width-lg: 260px;
  --button-desktop-radius: var(--radius-pill);

  --outer-card-radius: var(--radius-sm);
  --outer-card-soft-edge: #3972b4;

  --outer-panel-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -1px -1px 0 rgba(21, 59, 107, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.70),
    0 3px 0 rgba(21, 59, 107, 0.28),
    0 7px 12px rgba(21, 59, 107, 0.24),
    0 2px 5px rgba(21, 59, 107, 0.18);

  --outer-job-card-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.88),
    inset -1px -1px 0 rgba(21, 59, 107, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 2px 0 rgba(21, 59, 107, 0.22),
    0 5px 9px rgba(21, 59, 107, 0.20),
    0 2px 4px rgba(21, 59, 107, 0.16);

  --form-public-field-gap: var(--space-5);
  --form-public-section-gap: var(--space-8);
  --form-public-label-color: var(--ala-navy);
  --form-public-label-size: var(--fs-form-label, 15px);
  --form-public-input-height: var(--form-input-height, 44px);
  --form-public-input-bg: var(--form-input-bg, #ffffff);
  --form-public-input-border: var(--form-input-border, #d7e1ee);
  --form-public-input-border-hover: #b9c8d8;
  --form-public-input-border-focus: var(--form-input-focus-border, rgba(21, 59, 107, 0.35));
  --form-public-input-ring-focus: var(--form-input-focus-ring, 0 0 0 3px rgba(21, 59, 107, 0.08));
  --form-public-readonly-bg: #f3f6fa;
  --form-public-readonly-border: #dbe4ef;
  --form-public-readonly-text: #526170;
  --form-public-error-text: var(--message-error-text, #b42318);
  --form-public-error-bg: var(--message-error-bg, #fff4f2);
  --form-public-error-border: var(--message-error-border, #ffd1cc);

  --badge-height: 24px;
  --badge-radius: var(--radius-pill);
  --badge-padding-x: 10px;
  --badge-font-size: var(--fs-badge, 11px);
  --badge-new-bg: var(--color-status-new-bg, #fff1f0);
  --badge-new-border: var(--color-status-new-border, #ffccc7);
  --badge-new-text: var(--color-status-new, #b42318);
  --badge-updated-bg: var(--color-status-updated-bg, #e9f8ef);
  --badge-updated-border: var(--color-status-updated-border, #a7dfbd);
  --badge-updated-text: var(--color-status-updated, #16703a);
  --badge-info-bg: #f3f6fa;
  --badge-info-border: #dbe4ef;
  --badge-info-text: var(--ala-navy);
  --badge-required-bg: var(--message-error-bg, #fff4f2);
  --badge-required-border: var(--message-error-border, #ffd1cc);
  --badge-required-text: var(--message-error-text, #b42318);
  --badge-optional-bg: #f3f6fa;
  --badge-optional-border: #dbe4ef;
  --badge-optional-text: var(--ala-muted);

  --message-radius: var(--radius-md);
  --message-padding-y: var(--space-4);
  --message-padding-x: var(--space-5);
  --message-info-bg: #f3f7fc;
  --message-info-border: #cfddee;
  --message-info-text: #214f87;
}