/* ===================================================================
   wright-tokens.css — Wright デザイントークン
   Wright Design System の Single Source of Truth。
   全 Wright コンポーネントはこれらの変数を参照する。
   =================================================================== */

:root {
    /* ===== Brand Colors ===== */
    --wright-color-primary:         #374d6c;
    --wright-color-primary-darken:  #2e415b;
    --wright-color-primary-light:   #e8edf3;
    --wright-color-secondary:       #78909C;
    --wright-color-secondary-darken: #546E7A;
    --wright-color-secondary-light: #ECEFF1;
    --wright-color-tertiary:        #8fbc8f;

    /* ===== Semantic Colors =====
       Base: 状態ドット・アイコン・進捗表示
       Background: 淡色背景
       Border: 淡色背景上の枠線
       Foreground: 淡色背景上の文字・アイコン
       Strong: 白文字を載せる塗りつぶし面
       Hover: Strong のホバー状態 */
    --wright-color-info-base:          #1a73e8;
    --wright-color-info-background:    #e8f0fe;
    --wright-color-info-border:        #8ab4f8;
    --wright-color-info-foreground:    #1967d2;
    --wright-color-info-strong:        #1976d2;
    --wright-color-info-hover:         #1557b0;
    --wright-color-success-base:       #388e3c;
    --wright-color-success-background: #def0d8;
    --wright-color-success-border:     #a9d39a;
    --wright-color-success-foreground: #3c763d;
    --wright-color-success-strong:     #218739;
    --wright-color-success-hover:      #188038;
    --wright-color-warning-base:       #e56d00;
    --wright-color-warning-background: #fef7e0;
    --wright-color-warning-border:     #f6c26b;
    --wright-color-warning-foreground: #a65100;
    --wright-color-warning-strong:     #b25500;
    --wright-color-warning-hover:      #8f4300;
    --wright-color-error-base:         #d93025;
    --wright-color-error-background:   #fce8e6;
    --wright-color-error-border:       #f28b82;
    --wright-color-error-foreground:   #c5221f;
    --wright-color-error-strong:       #d32f2f;
    --wright-color-error-hover:        #b71c1c;

    /* Semantic color compatibility aliases */
    --wright-color-info:            var(--wright-color-info-base);
    --wright-color-info-light:      var(--wright-color-info-background);
    --wright-color-info-dark:       var(--wright-color-info-foreground);
    --wright-color-info-darken:     var(--wright-color-info-hover);
    --wright-color-success:         var(--wright-color-success-base);
    --wright-color-success-light:   var(--wright-color-success-background);
    --wright-color-success-dark:    var(--wright-color-success-foreground);
    --wright-color-success-darken:  var(--wright-color-success-hover);
    --wright-color-warning:         var(--wright-color-warning-base);
    --wright-color-warning-light:   var(--wright-color-warning-background);
    --wright-color-warning-dark:    var(--wright-color-warning-foreground);
    --wright-color-warning-darken:  var(--wright-color-warning-hover);
    --wright-color-error:           var(--wright-color-error-base);
    --wright-color-error-light:     var(--wright-color-error-background);
    --wright-color-error-dark:      var(--wright-color-error-foreground);
    --wright-color-error-darken:    var(--wright-color-error-hover);
    --wright-color-muted:           #9E9E9E;
    --wright-color-muted-light:     #F5F5F5;
    --wright-color-muted-dark:      #616161;

    /* ===== Feedback Surfaces =====
       Icon: 対応する淡色背景に対して 3:1 以上のコントラストを確保 */
    --wright-feedback-default-border:     #d6d5d5;
    --wright-feedback-default-background: #ffffff;
    --wright-feedback-default-foreground: #212121;
    --wright-feedback-default-icon:       #616161;
    --wright-feedback-primary-border:     #b3b9d0;
    --wright-feedback-primary-background: #e2e5ed;
    --wright-feedback-primary-foreground: #364574;
    --wright-feedback-primary-icon:       var(--wright-color-primary);
    --wright-feedback-secondary-border:     #aec9f9;
    --wright-feedback-secondary-background: #e1ebfd;
    --wright-feedback-secondary-foreground: #2d65cd;
    --wright-feedback-secondary-icon:       #2d65cd;
    --wright-feedback-info-border:     var(--wright-color-info-border);
    --wright-feedback-info-background: var(--wright-color-info-background);
    --wright-feedback-info-foreground: var(--wright-color-info-foreground);
    --wright-feedback-info-icon:       var(--wright-color-info-base);
    --wright-feedback-success-border:     var(--wright-color-success-border);
    --wright-feedback-success-background: var(--wright-color-success-background);
    --wright-feedback-success-foreground: var(--wright-color-success-foreground);
    --wright-feedback-success-icon:       var(--wright-color-success-base);
    --wright-feedback-warning-border:     var(--wright-color-warning-border);
    --wright-feedback-warning-background: var(--wright-color-warning-background);
    --wright-feedback-warning-foreground: var(--wright-color-warning-foreground);
    --wright-feedback-warning-icon:       var(--wright-color-warning-base);
    --wright-feedback-error-border:     var(--wright-color-error-border);
    --wright-feedback-error-background: var(--wright-color-error-background);
    --wright-feedback-error-foreground: var(--wright-color-error-foreground);
    --wright-feedback-error-icon:       var(--wright-color-error-base);

    /* ===== Snackbar =====
       アプリの既定ライトテーマに合わせた白い surface。
       状態色はアイコンに限定する。 */
    --wright-snackbar-background:   #ffffff;
    --wright-snackbar-foreground:   #202124;
    --wright-snackbar-border:       #dadce0;
    --wright-snackbar-close:        #5f6368;
    --wright-snackbar-info-icon:    var(--wright-color-info-base);
    --wright-snackbar-success-icon: var(--wright-color-success-strong);
    --wright-snackbar-warning-icon: var(--wright-color-warning-base);
    --wright-snackbar-error-icon:   var(--wright-color-error-base);

    /* ===== Surface / Background ===== */
    --wright-color-surface:         #FFFFFF;
    --wright-color-background:      #f5f5f5;
    --wright-color-background-gray: #fafafa;

    /* ===== Text ===== */
    --wright-font-family-sans:       'Roboto', 'Noto Sans JP', 'Yu Gothic UI', Meiryo, sans-serif;
    --wright-color-text-primary:    #212121;
    --wright-color-text-secondary:  #666666;
    --wright-color-text-disabled:   rgba(0, 0, 0, 0.38);

    /* ===== Actions ===== */
    --wright-color-action-default:  rgba(0, 0, 0, 0.54);
    --wright-color-action-hover:    rgba(0, 0, 0, 0.04);

    /* ===== Lines / Borders ===== */
    --wright-color-lines:           rgba(0, 0, 0, 0.12);
    --wright-color-lines-inputs:    rgba(0, 0, 0, 0.42);
    --wright-color-divider:         rgba(0, 0, 0, 0.12);

    /* ===== Focus ===== */
    --wright-focus-ring-width:      2px;
    --wright-focus-ring-offset:     1px;

    /* ===== Table ===== */
    --wright-color-table-lines:     rgba(0, 0, 0, 0.12);
    --wright-color-table-hover:     #eaeaea;
    --wright-color-table-striped:   #fbfbfb;

    /* ===== Overlay ===== */
    --wright-overlay-dark: rgba(0, 0, 0, 0.35);

    /* ===== Z-Index Scale ===== */
    --wright-zindex-dropdown:  1000;  /* トリガーに追従するポップアップ */
    --wright-zindex-appbar:    1050;  /* AppBar（インラインドロップダウンの上、ダイアログの下） */
    --wright-zindex-slide-overlay: 1051; /* 右スライドパネル背景 */
    --wright-zindex-slide-panel:   1052; /* 右スライドパネル本体 */
    --wright-zindex-dialog:    1500;  /* Dialog（Depth ごとに +10） */
    --wright-zindex-tooltip:   1200;  /* ツールチップ */
    --wright-zindex-errortip:  1300;  /* バリデーションエラーチップ */
    --wright-zindex-snackbar:  1400;  /* 通知（実態の Dialog 1500 より下） */

    /* ===== Layout ===== */
    /* 4px 基準のスペーシングスケール。余白・padding・gap はこの値を参照する。 */
    --wright-spacing-0:     0;
    --wright-spacing-1:     4px;
    --wright-spacing-2:     8px;
    --wright-spacing-3:     12px;
    --wright-spacing-4:     16px;
    --wright-spacing-5:     20px;
    --wright-spacing-6:     24px;
    --wright-spacing-7:     28px;
    --wright-spacing-8:     32px;
    --wright-spacing-10:    40px;
    --wright-spacing-12:    48px;
    --wright-spacing-16:    64px;

    /* 用途別スペーシング。画面固有 CSS では数値ではなくこちらを優先する。 */
    --wright-spacing-compact: var(--wright-spacing-1);
    --wright-spacing-related: var(--wright-spacing-2);
    --wright-spacing-section: var(--wright-spacing-4);

    /* ===== Component Heights ===== */
    --wright-card-header-height-small: 36px;
    --wright-card-header-height-medium: var(--wright-spacing-10);
    --wright-card-header-height-large: var(--wright-spacing-12);
    --wright-disclosure-header-height: var(--wright-spacing-12);

    --wright-border-radius:    4px;
    --wright-border-radius-lg: 8px;
    --wright-border-radius-xl: 12px;
    --wright-border-radius-pill: 999px;
    --wright-drawer-width:     245px;
    --wright-slide-panel-width: 380px;
    --wright-slide-panel-background: #f5f6f8;
    --wright-appbar-height:    64px;

    /* ===== Drawer ===== */
    --wright-drawer-background: #2c3e50;
    --wright-drawer-text:       #ecf0f1;
    --wright-drawer-icon:       #bdc3c7;

    /* ===== Appbar ===== */
    --wright-appbar-background: #374d6c;
    --wright-appbar-text:       #ecf0f1;

    /* ===== Elevation ===== */
    --wright-elevation-0: none;
    --wright-elevation-1: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
                          0 1px 1px 0 rgba(0, 0, 0, 0.14),
                          0 1px 3px 0 rgba(0, 0, 0, 0.12);
    --wright-elevation-2: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                          0 2px 2px 0 rgba(0, 0, 0, 0.14),
                          0 1px 5px 0 rgba(0, 0, 0, 0.12);
    --wright-elevation-3: 0 3px 3px -2px rgba(0, 0, 0, 0.2),
                          0 3px 4px 0 rgba(0, 0, 0, 0.14),
                          0 1px 8px 0 rgba(0, 0, 0, 0.12);
    --wright-elevation-4: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
                          0 4px 5px 0 rgba(0, 0, 0, 0.14),
                          0 1px 10px 0 rgba(0, 0, 0, 0.12);
    --wright-elevation-8: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                          0 8px 10px 1px rgba(0, 0, 0, 0.14),
                          0 3px 14px 2px rgba(0, 0, 0, 0.12);
    --wright-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
                           0 24px 38px 3px rgba(0, 0, 0, 0.14),
                           0 9px 46px 8px rgba(0, 0, 0, 0.12);

    /* ===== Dialog Surfaces =====
       大きなモーダル面は基本の 4px より一段大きい 8px を使用する。 */
    --wright-dialog-background:        var(--wright-color-surface);
    --wright-dialog-header-background: var(--wright-color-background-gray);
    --wright-dialog-border-color:      var(--wright-color-divider);
    --wright-dialog-title-color:       var(--wright-color-text-primary);
    --wright-dialog-close-color:       var(--wright-color-action-default);
    --wright-dialog-border-radius:     var(--wright-border-radius-lg);
    --wright-dialog-shadow:            var(--wright-elevation-24);

    /* ===== Compact Popover Surfaces =====
       Menu / Select / Autocomplete のような、アンカーに追従する選択面。 */
    --wright-compact-popover-background: var(--wright-color-surface);
    --wright-compact-popover-foreground: #0f0f0f;
    --wright-compact-popover-border: 0;
    --wright-compact-popover-border-radius: var(--wright-border-radius);
    --wright-compact-popover-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.14);
    --wright-compact-popover-padding-block: 0;
    --wright-compact-popover-item-min-height: var(--wright-spacing-10);
    --wright-compact-popover-item-padding-inline: var(--wright-spacing-3);
    --wright-compact-popover-item-gap: var(--wright-spacing-3);
    --wright-compact-popover-item-hover: rgba(0, 0, 0, 0.05);
    --wright-compact-popover-item-active: rgba(0, 0, 0, 0.10);
    --wright-compact-popover-item-highlighted: rgba(0, 0, 0, 0.08);
    --wright-compact-popover-motion-duration: 120ms;
    --wright-compact-popover-motion-easing: cubic-bezier(0.2, 0, 0, 1);

    /* ===== Picker Surfaces =====
       Date / Time / DateRange / Color Picker の情報量が多い選択面。 */
    --wright-picker-surface-background: var(--wright-color-surface);
    --wright-picker-surface-border: 0;
    --wright-picker-surface-border-radius: var(--wright-border-radius);
    --wright-picker-surface-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.16);
    --wright-picker-modal-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.18);

    /* ===== Transient Bubbles =====
       Tooltip / ErrorTip のような一時的で非操作型の補助表示。 */
    --wright-transient-bubble-border-radius: var(--wright-border-radius);
    --wright-transient-bubble-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* CSS-only opt-in dark theme.
   将来のテーマ機構から html の属性を切り替えるだけで適用できる。 */
:root[data-wright-snackbar-theme="dark"] {
    --wright-snackbar-background:   #323232;
    --wright-snackbar-foreground:   #ffffff;
    --wright-snackbar-border:       transparent;
    --wright-snackbar-close:        var(--wright-snackbar-foreground);
    --wright-snackbar-info-icon:    #8ab4f8;
    --wright-snackbar-success-icon: #81c995;
    --wright-snackbar-warning-icon: #fdd663;
    --wright-snackbar-error-icon:   #f28b82;
}