@import 'mixins.scss';

/* Atomic Unit
 * -------------------------------------------------------------------------- */

$page-width: 784px;

$unit: 8px;
$margin: $unit * 5;

$unit-fourth: calc($unit / 4);
$unit-half: calc($unit / 2);
$unit-three-fourth: calc($unit / 4) * 3;
$unit-2x: $unit * 2;
$unit-3x: $unit * 3;
$unit-4x: $unit * 4;
$unit-5x: $unit * 5;
$unit-6x: $unit * 6;
$unit-7x: $unit * 7;
$unit-8x: $unit * 8;
$unit-9x: $unit * 9;
$unit-10x: $unit * 10;
$unit-11x: $unit * 11;
$unit-12x: $unit * 12;
$unit-13x: $unit * 13;
$unit-14x: $unit * 14;
$unit-15x: $unit * 15;
$unit-16x: $unit * 16;
$unit-17x: $unit * 17;
$unit-18x: $unit * 18;
$unit-19x: $unit * 19;
$unit-20x: $unit * 20;
$unit-22x: $unit * 22;

// Common pixel values
$unit-1px: 1px;
$unit-2px: 2px;
$unit-3px: 3px;
$unit-4px: 4px;
$unit-5px: 5px;
$unit-6px: 6px;
$unit-10px: 10px;
$unit-12px: 12px;
$unit-14px: 14px;
$unit-18px: 18px;
$unit-20px: 20px;
$unit-24px: 24px;
$unit-28px: 28px;
$unit-30px: 30px;
$unit-36px: 36px;
$unit-48px: 48px;
$unit-56px: 56px;
$unit-64px: 64px;

/* Corner Radius
 * -------------------------------------------------------------------------- */
$corner-radius-xs: 4px; // $unit-half
$corner-radius-sm: 6px; // $unit-three-fourth
$corner-radius-md: 8px; // $unit
$corner-radius-lg: 10px; // $unit + 2px
$corner-radius-xl: 12px; // $unit * 1.5
$corner-radius-2xl: 16px; // $unit-2x
$corner-radius-3xl: 24px; // $unit-3x
$corner-radius-full: 999px; // Full rounded

/* Page properties
 * -------------------------------------------------------------------------- */
$page-corner-radius: $corner-radius-md;
$image-corner-radius: $corner-radius-2xl;
$card-corner-radius: $corner-radius-3xl;

$page-top-margin: $unit-6x;

$page-vert-padding: $unit-6x;
$page-horz-padding: $unit-5x;

$page-fourth: calc(($page-width - $margin * 5) / 4);
$page-third: calc(($page-width - $margin * 5) / 3);
$page-half: calc(($page-fourth * 2) + $margin);

$card-height: $unit-14x;
$mention-padding: $unit-3x;

/* Typography
 * -------------------------------------------------------------------------- */

$font-stack: 'Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;

$font-unit: 18px;
$font-unit-mobile: 16px;

$font-size-extra-small: 0.75rem; // 12
$font-size-small: 0.875rem; // 14
$font-size: 1rem; // 18
$font-size-med: 1.25rem; // 20
$font-size-large: 1.4rem; // 22
$font-size-xlarge: 1.65rem; // 26

$font-weight: 400;
$font-weight-med: 500;
$font-weight-bold: 600;

$line-height: 1.3;

$letter-spacing: -0.02em;

/* Color Scales
 * -------------------------------------------------------------------------- */

// Gray scale - from darkest to lightest
$gray-00: #333333;
$gray-10: #4d4d4d;
$gray-20: #666666;
$gray-30: #808080;
$gray-40: #999999;
$gray-50: #b2b2b2;
$gray-60: #cccccc;
$gray-70: #dfdfdf;
$gray-80: #e8e8e8;
$gray-85: #ebebeb;
$gray-90: #f0f0f0;
$gray-95: #f5f5f5;
$gray-97: #fafafa;
$gray-100: #ffffff;

// Red scale - from darkest to lightest
$red-00: #3d0c0c;
$red-10: #7d1919;
$red-20: #a31919;
$red-30: #c31919;
$red-40: #d31919;
$red-50: #dd3333;
$red-60: #e33d3d;
$red-70: #e86a58;
$red-80: #ff6a54;
$red-90: #ff9d8f;
$red-95: #ffcdc5;
$red-100: #ffe5e0;

// Blue scale - from darkest to lightest
$blue-00: #0a2540;
$blue-10: #0f5d8f;
$blue-20: #126fa8;
$blue-30: #1279b5;
$blue-40: #1482c1;
$blue-50: #2e8bc0;
$blue-60: #4d9fd0;
$blue-70: #70b5de;
$blue-80: #9ccde9;
$blue-90: #c5eaff;
$blue-95: #dff4ff;
$blue-100: #f0f9ff;

// Yellow scale - from darkest to lightest
$yellow-00: #3d2600;
$yellow-10: #664400;
$yellow-20: #996600;
$yellow-30: #cc9900;
$yellow-40: #e6b800;
$yellow-50: #f5c500;
$yellow-60: #ffcc00;
$yellow-70: #ffdd4d;
$yellow-80: #ffeb99;
$yellow-90: #fff9e6;
$yellow-95: #fffcf0;
$yellow-100: #fffef9;

// Green scale - from darkest to lightest
$green-00: #0a3d28;
$green-10: #065f46;
$green-20: #047857;
$green-30: #059669;
$green-40: #10b981;
$green-50: #34d399;
$green-60: #6ee7b7;
$green-70: #a7f3d0;
$green-80: #d1fae5;
$green-90: #ecfdf5;
$green-95: #f0fdf9;
$green-100: #f9fffc;

// Orange scale - from darkest to lightest
$orange-00: #3d1a0c;
$orange-10: #7c2d12;
$orange-20: #c2410c;
$orange-30: #ea580c;
$orange-40: #f97316;
$orange-50: #fb923c;
$orange-60: #fdba74;
$orange-70: #fed7aa;
$orange-80: #ffedd5;
$orange-90: #fff7ed;
$orange-95: #fffbf7;
$orange-100: #fffdfa;

// Special colors
$black: #000000;
$white: #ffffff;
$dark-blue: #070610; // Brand specific dark color

/* Semantic Color Assignments
 * -------------------------------------------------------------------------- */

// Backgrounds
$bg-color: $gray-80;
$page-color: $white;
$card-color: $gray-90;
$card-color-hover: $gray-85;

// Text colors
$text-color: $gray-10;
$text-color-subdued: $gray-20;
$text-color-light: $gray-50;

// Brand colors
$accent-color: $red-60;
$primary-color: $blue-40;

// Status colors
$success-color: $green-40;
$error-color: $red-60;
$warning-color: $yellow-50;
$info-color: $blue-50;

// Component specific
$image-border-color: rgba(0, 0, 0, 0.03);

/* Shadows and Overlays
 * -------------------------------------------------------------------------- */
$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
$card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

// Shadow utilities
$shadow-subtle: rgba(0, 0, 0, 0.08);
$shadow-light: rgba(0, 0, 0, 0.1);
$shadow-medium: rgba(0, 0, 0, 0.15);
$shadow-dark: rgba(0, 0, 0, 0.2);
$shadow-heavy: rgba(0, 0, 0, 0.25);

// Overlay utilities
$overlay-light: rgba(255, 255, 255, 0.9);
$overlay-white-subtle: rgba(255, 255, 255, 0.95);
$overlay-medium: rgba(0, 0, 0, 0.5);
$overlay-dark: rgba(0, 0, 0, 0.7);

// Border utilities
$border-light: rgba(0, 0, 0, 0.05);
$border-medium: rgba(0, 0, 0, 0.1);
$border-dark: rgba(0, 0, 0, 0.2);

/* Pill colors
 * -------------------------------------------------------------------------- */
$work-bg: $red-95;
$work-color: $red-30;
$universe-bg: $orange-80;
$universe-color: $orange-20;
$labs-bg: $blue-90;
$labs-color: $blue-40;

$facebook-color: #3b5998;
$twitter-color: #55acee;
$instagram-color: #3f729b;
$pinterest-color: #bd061c;
$github-color: #6cc644;
$cmu-color: #fe6420;
$quip-color: #ae4830;

$twitter-button-color: #6cc0ff;
$twitter-text-color: #0f5f9b;

/* Images
 * -------------------------------------------------------------------------- */
$corner-radius: $unit-2x;
$mobile-corner-radius: $unit-2x;

/* Inputs
 * -------------------------------------------------------------------------- */

$input-background-color: $gray-90;
$input-background-color-hover: $gray-85;
$input-text-color: $gray-20;
$input-text-color-hover: $gray-10;

/* Avatar header
 * -------------------------------------------------------------------------- */
$avatar-radius: 2rem;
$avatar-url: url('images/header.png');

/* Animation and Transitions
 * -------------------------------------------------------------------------- */
$transition-instant: 0.1s;
$transition-fast: 0.15s;
$transition-normal: 0.2s;
$transition-medium: 0.3s;
$transition-slow: 0.5s;

$animation-fast: 0.5s;
$animation-normal: 1s;
$animation-slow: 2s;
$animation-very-slow: 3s;

/* Media queries breakpoints
 * These needs to be revisited
 * -------------------------------------------------------------------------- */

$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

// Map old color variables to new scale
$orange-red: $red-70;
$salmon-pink: $red-95; // Desaturated salmon pink for hover states
$gray-5: $gray-97; // Was an old variable between 95 and 100
$red-error: #dc2626; // Error state color

// Shadow variables
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);