/* ============================================================
   nibango Design Variables (Apple HIG)
   ============================================================ */

/* ========== Light Theme (Default) ========== */
:root {
    color-scheme: light;
    /* System Colors */
    --system-blue: #007AFF;
    --system-green: #34C759;
    --system-indigo: #5856D6;
    --system-orange: #FF9500;
    --system-pink: #FF2D55;
    --system-purple: #AF52DE;
    --system-red: #FF3B30;
    --system-teal: #5AC8FA;
    --system-yellow: #FFCC00;

    /* Grays */
    --system-gray: #8E8E93;
    --system-gray-2: #AEAEB2;
    --system-gray-3: #C7C7CC;
    --system-gray-4: #D1D1D6;
    --system-gray-5: #E5E5EA;
    --system-gray-6: #F2F2F7;

    /* Backgrounds */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F2F2F7;
    --bg-tertiary: #FFFFFF;

    /* Separators */
    --separator: rgba(60, 60, 67, 0.12);
    --separator-opaque: #C6C6C8;

    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(0, 0, 0, 0.06);
    --blur-intensity: 20px;

    /* Text */
    --text-primary: #000000;
    --text-secondary: rgba(60, 60, 67, 0.85);
    --text-tertiary: rgba(60, 60, 67, 0.75);
    /* Secondary text that has to clear WCAG AA (4.5:1) at small sizes —
       The legacy 0.6-opacity text only reached 3.44:1 on white. */
    --text-secondary-aa: rgba(60, 60, 67, 0.85);

    /* Brand */
    --brand-niban: #007AFF;
    --brand-go: #34C759;
    --b-primary: var(--brand-niban);
    --b-primary-hover: #0056b3;
    /* #007AFF is only 4.02:1 against white, so it fails AA both as small
       blue text and as a fill behind white text. Two accessible siblings:
       -fill sits behind white text (5.8:1) and is the same in both themes;
       -text is blue type on the page ground and has to flip with the theme. */
    --b-primary-fill-aa: #0062CC;
    --b-primary-text-aa: #0056B3;
    --b-success: var(--brand-go);
    --b-danger: var(--system-red);

    /* Semantic foregrounds and fills keep small text readable in both themes. */
    --text-success: #116B32;
    --text-warning: #874000;
    --text-danger: #B00020;
    --b-success-fill-aa: #16783A;
    --b-warning-fill-aa: #8A4300;
    --b-danger-fill-aa: #C60021;
    --b-purple-fill-aa: #7834A4;

    /* Fonts */
    --font-system: 'ClashGrotesk', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Spacing */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;
    --sp-3xl: 64px;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 9999px;

    /* Card */
    --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.05);
    --price-bg: rgba(0, 0, 0, 0.75);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --t-fast: 0.15s ease-in-out;
}